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

问题描述

我目前正在建立一个HTML5网络应用程序/ Phonegap原生应用程序，我似乎不知道如何保存我的画布作为一个图像与canvas.toDataURL（）有人可以帮助我吗？ p>

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

//我的画布命名为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：

$ b b

---

 < div id =createPNGButton> 
< button onclick =putImage（）>另存为图片< / button> 
< / div> 
  

b Wardenclyffe

解决方案

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

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

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 please 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>

Thanks, Wardenclyffe

解决方案

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屋！