Question

我一直在尝试找到一种方法来将画布保存到文件中。我的图像太大而无法使用dataToUrl，所以我一直在尝试各种toblob方法。似乎当使用图案填充时，toblob不起作用。如果有可能这项工作或者有其他方法可以实现这一目标，是否有人能够找到我？感谢

jfiddle example

<!DOCTYPE html>
<html>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>

<script src="jquery.min.js"></script>
<script src="canvas-to-blob.js"/></script>
<script src="FileSaver.js-master\FileSaver.js"></script>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);
var img = new Image();
img.src = "http://www.w3schools.com/tags/img_lamp.jpg";
var pat = ctx.createPattern(img, "repeat");
ctx.rect(0, 0, 150, 100);

//Works with color, but not with pattern
ctx.fillStyle = pat;
//ctx.fillStyle = 'blue';

ctx.fill();

try {
    var isFileSaverSupported = !! new Blob();
} catch (e) {
    alert(e);
}
alert("toBlob");
c.toBlob(function (blob) {
    alert("success");
    saveAs(blob, "TruVue.png");
});
</script>
</html>

Answer 1

原因是由于CORS，来自其他域的图片受到限制 - 您可以在画布上显示它们，但无法提取其位图。

由于toBlob是一种位图提取方法，例如toDataURL或getImageData，您将无法使用这些图像。

有几种解决方法：

将图像上传到您自己的服务器并从那里加载（与您用于该页面的域相同）。
修改其他服务器以包含Access-Control-Allow-Origin标头（在这种情况下，它可能无法执行）。
将您自己的服务器用作图像代理

BTW：您还应该使用图像的onload事件，以确保在使用图像之前图像得到正确加载：

var img = new Image();
img.onload = drawFunction;
img.src = "http://www.w3schools.com/tags/img_lamp.jpg";

function drawFunction() {
    /// draw here
}

使用图案填充时，canvas.toblob失败

1 个答案: