Question

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

  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+'"/>');
    }
  });

虽然有效，但我在控制台中收到此错误并且未创建图像

未捕获（在promise中）DOMException：无法执行'toDataURL' 'HTMLCanvasElement'：可能无法导出受污染的画布。

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>

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

如果有错误说＆＃34;污染的画布无法导出＆＃34;，那么你可以删除污点，如果它不起作用，如果你能够与你的应用

Answer 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));

如何将画布转换为图像？

2 个答案: