如何使用 canvas.toDataURL() 将画布另存为图像？

IT技术 javascript html cordova canvas save
2021-02-08 22:05:16

我目前正在构建一个 HTML5 网络应用程序/Phonegap 本机应用程序，我似乎无法弄清楚如何将我的画布保存为带有canvas.toDataURL(). 有人可以帮我吗？

这是代码，有什么问题吗？

//我的画布被命名为“canvasSignature”

JavaScript：

function putImage()
{
  var canvas1 = document.getElementById("canvasSignature");        
  if (canvas1.getContext) {
     var ctx = canvas1.getContext("2d");                
     var myImage = canvas1.toDataURL("image/png");      
  }
  var imageElement = document.getElementById("MyPix");  
  imageElement.src = myImage;                           

}

HTML5：

<div id="createPNGButton">
    <button onclick="putImage()">Save as Image</button>        
</div>
6个回答

这是一些代码。没有任何错误。

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  // here is the most important part because if you dont replace you will get a DOM 18 exception.


window.location.href=image; // it will save locally
工作正常。如何更改下载文件的名称？它只是“下载”而没有扩展名。谢谢！
2021-03-13 22:05:16
我有保存问题有人可以帮助我查看此链接：stackoverflow.com/questions/25131763/...
2021-03-15 22:05:16
IE9 标准模式除外：“此网页上的某些内容或文件需要您尚未安装的程序。” Internet Explorer 8 及更高版本仅支持 CSS、<link> 和 <img> 中图像的数据 URI：developer.mozilla.org/en-US/docs/data_URIs
2021-03-22 22:05:16
这很好用......但在 Android（Galaxy S3 中的默认浏览器）中它只是不下载图像，但我永远收到消息“正在下载......”。
2021-03-30 22:05:16
在 Chrome 中，这会导致浏览器崩溃。如果我在图像标签中显示图像，它确实有效，但右键单击菜单是灰色的 - 所以我仍然无法保存图像。
2021-04-02 22:05:16

此解决方案允许您更改下载文件的名称：

HTML：

<a id="link"></a>

Java脚本：

  var link = document.getElementById('link');
  link.setAttribute('download', 'MintyPaper.png');
  link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
  link.click();
谢谢你，它对我帮助很大！
2021-03-19 22:05:16

您可以使用canvas2image来提示下载。

我遇到了同样的问题，这是一个简单的例子，它既将图像添加到页面并强制浏览器下载它：

<html>
    <head>
        <script src="http://hongru.github.io/proj/canvas2image/canvas2image.js"></script>
        <script>
            function draw(){
                var canvas = document.getElementById("thecanvas");
                var ctx = canvas.getContext("2d");
                ctx.fillStyle = "rgba(125, 46, 138, 0.5)";
                ctx.fillRect(25,25,100,100); 
                ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";
                ctx.fillRect(58, 74, 125, 100);
            }

            function to_image(){
                var canvas = document.getElementById("thecanvas");
                document.getElementById("theimage").src = canvas.toDataURL();
                Canvas2Image.saveAsPNG(canvas);
            }
        </script>
    </head>
    <body onload="draw()">
        <canvas width=200 height=200 id="thecanvas"></canvas>
        <div><button onclick="to_image()">Draw to Image</button></div>
        <image id="theimage"></image>
    </body>
</html>
刚刚试了一下，它会在 Chrome 中保存一个没有名称和扩展名的文件。
2021-03-16 22:05:16
您发布的链接已损坏
2021-03-17 22:05:16
正如这里提到的nihilogic.dk/labs/canvas2image设置文件名似乎是不可能的：“如果可以将文件名以某种方式附加到数据中，那将非常简洁，但我发现没有办法做到这一点。现在，您必须自己指定文件名。”
2021-03-25 22:05:16

你可以试试这个；创建一个虚拟的 HTML 锚点，然后从那里下载图像，比如......

// Convert canvas to image
document.getElementById('btn-download').addEventListener("click", function(e) {
    var canvas = document.querySelector('#my-canvas');

    var dataURL = canvas.toDataURL("image/jpeg", 1.0);

    downloadImage(dataURL, 'my-canvas.jpeg');
});

// Save | Download image
function downloadImage(data, filename = 'untitled.jpeg') {
    var a = document.createElement('a');
    a.href = data;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
}
太感谢了！对我来说效果很好！
2021-03-13 22:05:16
我喜欢一切都在 JS 中完成的事实，包括链接元素的创建。它适用于自动化目的
2021-03-17 22:05:16
完美解决方案
2021-03-25 22:05:16

我创建了一个小型库来执行此操作（以及其他一些方便的转换）。它叫做reimg，使用起来非常简单。

ReImg.fromCanvas(yourCanvasElement).toPng()

很酷的图书馆。谢谢。但是示例文档中有一个小问题。我在 Github 上开了一个 issue 来引起你的注意。
2021-04-01 22:05:16
其它你可能感兴趣的问题
上一篇将 JavaScript NodeList 转换为数组的最快方法？ 下一篇如何使用 Prototype 自动调整文本区域的大小？