将污染的画布下载为PNG格式。

Question

我想做一个按钮，当按下时，下载一个画布元素为PNG文件。

function downloadImage(canvas)
{
    let url = canvas.toDataURL("image/png");
    window.open(url);
}

这段代码对于没有污染的画布是有效的，但是我试图下载的画布已经被污染了，所以我不能运行以下代码。.toDataURL() 上。我看到的许多处理污画布的帖子都与创建画布的图像显示有关，但有什么方法可以在不创建中间图像元素的情况下直接下载？

我的网站非常简单，目前我没有在任何服务器上运行（只是在谷歌浏览器中打开index.html文件）。然而，我也不想改变任何本地浏览器的设置，因为我希望它能在多个不同的浏览器上运行。

Answer 1

问题是，JavaScript的设计是为了让你不下载任何污染的图片。

但是，这一点是可以规避的。你在问题中提到，你使用的是文件协议；但是，在评论中提到，你最终会对在github页面使用web服务器持开放态度，所以，如果我们在这个背景下工作，也许，我们可以做到这一点。

首先，再次直接回答你的问题，如何下载一个被操作过的污染画布，官方设计浏览器的目的是为了防止这种情况的发生，请参见 https:/stackoverflow.coma369057782016831。 获取更多信息。

那么现在说说可能的解决方法。

这取决于为什么画布会被污染，是在你的代码访问它之前有什么东西被画在上面，还是你的代码首先就使它被污染了？

如果是第二种情况，那么，就像前面引用的答案中提到的，你可以做几件事。

首先，尝试在图片元素上添加JavaScript属性。 crossOrigin = "anonymous"这可能对一些网站有用。

对于其他网站来说，你可以使用nodeJS或PHP或任何其他服务器端语言设置一个简单的服务器，托管在任何托管平台上，它将向给定的图像URL发出HTTP请求，下载它，并将其回传到你的客户端文件，访问控制-允许-原点设置成 *但是，正如答案中提到的，这将会占用更多的带宽，但如果带宽不是问题，那么你可以这样做。

当然，你也可以让用户简单地通过文件输入而不是URL上传图片，但那会限制可用性。

另一个替代方案，与第一个提到的 "跨源 "方案有关，如果图片来自一个允许跨源请求的网站，你可以先用fetch下载，然后从blob数据中做一个对象URL，并将图片的来源设置为该对象，然后当图片加载时，将其绘制到画布上，基本上是

fetch("someURLtoAnImageOnaSiteThatAllowsCrossOriginRequests")
.then(result => result.blob())
.then(blob => {
    myImageElement.src = URL.createObjectURL(blob);
    myImageElement.onload = startDrawingImageToCanvasFunction;
})