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

我一直在试图找到一种方法来将画布保存到文件中。我的图像太大，无法使用DataTour，因此我一直在尝试各种toblob方法。似乎使用图案填充时，toblob不起作用。如果这是可行的，或者如果有其他方法来实现这一点，有人能告诉我吗？谢谢

您的浏览器不支持HTML5画布标记。
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.clearRect（0，0，c.宽度，c.高度）；
var img=新图像（）；
img.src=”http://www.w3schools.com/tags/img_lamp.jpg";
var pat=ctx.createPattern（img，“repeat”）；
ctx.rect（0,0,150,100）；
//适用于颜色，但不适用于图案
ctx.fillStyle=pat；
//ctx.fillStyle='蓝色'；
ctx.fill（）；
试一试{
var isFileSaverSupported=！！new Blob（）；
}捕获（e）{
警报（e）；
}
警报（“toBlob”）；
c、 toBlob（函数（blob）{
警惕（“成功”）；
saveAs（blob，“TruVue.png”）；
});

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

由于

toBlob

是一种位图提取方法，如

toDataURL

或

getImageData

您将无法使用这些图像

有两个解决办法：

• 将图像上载到您自己的服务器并从那里加载（与页面使用的域相同）
• 修改另一台服务器，使其包含

  访问控制允许源站

  标题（在这种情况下，它可能无法执行）
• 使用您自己的服务器作为映像代理

顺便说一句：您还应该使用图像的

onload

事件，以确保在使用图像之前正确加载图像：

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

function drawFunction() {
    /// draw here
}

---

谢谢，我对这一切都不熟悉，所以我没有CORS的限制，我只是觉得w3schools是一个很容易获得图片的地方。使用的真实图像位于同一域上。我只在本地机器上测试了所有东西，但结果是一样的。我现在将在服务器上测试它，看看这是否有区别。@DavidRay我忘了提到使用

文件：//

协议加载的图像也被认为来自不同的来源，如果这是您在本地使用的。在服务器上得到相同的结果。@Ken再次尝试，效果很好，第三次刷新就是魅力所在。谢谢你的帮助！

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

function drawFunction() {
    /// draw here
}