如何使用 canvas.toDataURL() 将画布另存为图像? [英] How To Save Canvas As An Image With canvas.toDataURL()?

问题描述

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

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

//我的画布被命名为canvasSignature"

JavaScript:

<小时>

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

HTML5:

<小时>

<button onclick="putImage()">另存为图片</button>

解决方案

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

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");//这里是最重要的部分，因为如果你不替换你会得到一个 DOM 18 异常.window.location.href=图像；//它会保存在本地

I'm currently building a HTML5 web app/Phonegap native app and I can't seem to figure out how to save my canvas as an image with canvas.toDataURL(). Can somebody help me out?

Here's the code, what's wrong with it?

//My canvas was named "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>

解决方案

Here is some code. without any error.

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

这篇关于如何使用 canvas.toDataURL() 将画布另存为图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！