如何使用 canvas.toDataURL（）将 Canvas 另存为图像？

javascript html canvas save cordova

2022-08-30 01:40:47

我目前正在构建一个HTML5 Web应用程序/ 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>

答案 1

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

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

答案 2

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

网页：

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

JAVASCRIPT：

  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();

如何使用 canvas.toDataURL（） 将 Canvas 另存为图像？

如何使用 canvas.toDataURL（）将 Canvas 另存为图像？