javascript - 如何将 Canvas 转换为图像？

Question

我正在将整个页面转换为 Canvas ，现在我想将其转换为可以下载的图像:

  html2canvas(document.body, {
    allowTaint: true,
    onrendered: function(canvas) {
      document.body.appendChild(canvas).setAttribute("id", "canvas");
      var canvas = document.getElementById("canvas");
      var img    = canvas.toDataURL("image/png");
      img.setAttribute('crossOrigin', 'anonymous');
      document.write('<img src="'+img+'"/>');
    }
  });

这可行，但我在控制台中收到此错误并且未创建图像

Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Answer 1

试试这个:

<a id="download" 
  onclick="var download = document.getElementById('download');
  download.href = document.getElementById('canvasElementId').toDataURL();
  download.download='imageName.png'">
Save Canvas Image</a>

您拥有所有不需要的多余内容，它会生成一个图像，您必须通过右键单击并保存来执行额外的步骤。这更容易并且效果更好。

如果出现错误，提示“无法导出受污染的 Canvas ”，那么如果它不起作用并且您可以使用您的应用程序来删除该污染，则可以删除该污染。