2

我一直在尝试找到一种将画布保存到文件的方法。我的图片太大，无法使用dataToUrl，所以我一直在尝试各种toblob方法。似乎当使用图案填充时，toblob 不起作用。如果有可能，或者如果有其他方法可以做到这一点，任何人都可以向我求助吗？谢谢

小提琴示例

<!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>
4

1 回答 1

3

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

就像toBlob位图提取方法一样toDataURL，否则getImageData您将无法使用这些图像。

有几个解决方法：

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

顺便说一句：您还应该使用图像的onload事件来确保在使用图像之前正确加载图像：

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

function drawFunction() {
    /// draw here
}
于 2013-07-25T20:50:30.497 回答