Question

我一直在努力将画布保存为一种在某种程度上取得成功的文件。每次我将文件保存为图像时，最终都会下载空白图像文件。然而，当我使用//document.write('<img src="'+image+'"/>');时，它会将绘制的画布显示为可以下载的图像。

function saveFile() {
var image = document.getElementById("canvas").toDataURL("image/png");
//document.write('<img src="'+image+'"/>');

var link = document.createElement("a");
link.download = "image.png";
link.href = image;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
delete link;
};

控制台日志中没有任何内容。

你们能告诉我如何解决这个问题？

提前多多感谢。

Answer 1

首先，这里不需要删除操作符，因为您无法删除用var声明的变量。话虽如此，试试下面的代码片段，因为它是在Firefox和Chrome上测试的工作解决方案：

<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>
    <canvas width="480" height="480">
    </canvas>
    <script id="mainScript" type="text/javascript">
        !function(){
            var canvas = document.getElementsByTagName("canvas")[0],
                img = new Image();
            img.src = "./test.jpg";
            img.crossOrigin = "Anonymous";
            img.onload = function(){
                canvas.getContext("2d").drawImage(this,0,0,480,480);
                var dURL = canvas.toDataURL("image/png"),
                    aTag = document.createElement("a");
                aTag.download = "image.png";
                aTag.href = dURL;
                aTag.textContent = "click to download";
                document.body.appendChild(aTag);
                aTag.click();
                aTag.parentNode.removeChild(aTag);
            };
        }();
    </script>
</body>
</html>

确保服务器发送正确的Access-Control-Allow-Origin标头，以便画布不会受到污染。

一个选项可能是在requestAnimationFrame或setTimeout中包含链接删除，但我怀疑它会解决。首先试试这个片段，然后我们可以看看问题是否存在于其他地方。顺便说一句，您正在测试哪个浏览器？

JavaScript将Canvas保存为文件

1 个答案: