如何将画布转换为图像？答案

【问题标题】：How to convert canvas to image?如何将画布转换为图像？
【发布时间】：2017-09-08 23:32:06
【问题描述】：

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

  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'：可能无法导出受污染的画布。

【问题讨论】：

base64 编码图像数据 -> img
@EricSo 您能否根据上面的代码将其详细说明为答案？
我认为您正试图通过库html2canvas 捕获当前屏幕，然后将其放入图像标签中，对吗？因为浏览器将捕获的图像定义为本地域。出于安全原因，浏览器不允许您使用toDataURL API 导出图像。
@EricSo 这正是我正在做的，我该如何解决？
我认为你无法解决它。这是出于安全原因。例如，黑客使用这种 javascript 来获取您的私人电子邮件的内容。

标签： javascript canvas

【解决方案1】：

试试这个：

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

你有所有你不需要的多余的东西，它会生成一个图像，你必须通过右键单击并保存来做一个额外的步骤。这更容易，效果也更好。

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

【讨论】：

未捕获的 DOMException：无法在“HTMLCanvasElement”上执行“toDataURL”：可能无法导出受污染的画布。

【解决方案2】：

如果可以将图片数据发布到php脚本中，那就很简单了。

将数据发布到 php：

var imgData = canvas.toDataURL('image/png');
$.post("https://path-to-your-script/capture.php", {image: imgData},
    function(data) {
        console.log('posted');
});

在 php 脚本中收集数据：

capture.php

$data = $_POST['image'];

// remove "data:image/png;base64," from image data.
$data = str_replace("data:image/png;base64,", "", $data);

// save to file
file_put_contents("/tmp/image.png", base64_decode($data));

【讨论】：