如何使用canvas.toDataURL（）将canvas保存为图像？
我目前正在构build一个HTML5的Web应用程序/ Phonegap原生应用程序，我似乎无法弄清楚如何将canvas作为一个图像保存到canvas.toDataURL() 。 有人能帮我吗？
这是代码，它有什么问题？
//我的canvas被命名为“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>
这是一些代码。 没有任何错误。
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
你可以使用canvas2image来提示下载。
我有同样的问题，这里有一个简单的例子，它将图像添加到页面，并强制浏览器下载它：
<html> <head> <script src="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>
我创build了一个小图书馆（与其他一些便利的转换）。 这叫做reimg ，使用起来非常简单。
ReImg.fromCanvas(yourCanvasElement).toPng()
这个工作对我来说:(只有谷歌铬）
<html> <head> <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 downloadImage() { var canvas = document.getElementById("thecanvas"); var image = canvas.toDataURL(); var aLink = document.createElement('a'); var evt = document.createEvent("HTMLEvents"); evt.initEvent("click"); aLink.download = 'image.png'; aLink.href = image; aLink.dispatchEvent(evt); } </script> </head> <body onload="draw()"> <canvas width=200 height=200 id="thecanvas"></canvas> <div><button onclick="downloadImage()">Download</button></div> <image id="theimage"></image> </body> </html>
而不是imageElement.src = myImage; 你应该使用window.location = myImage;
甚至之后，浏览器将显示图像本身。 您可以右键单击并使用“保存链接”下载图像。
查看这个链接了解更多信息。
与1000bugy的答案类似，但更简单，因为您不必dynamic锚点和手动发送一个点击事件（加上一个IE修复）。
如果您将下载button设置为锚点，则可以在运行默认锚点function之前将其解压。 所以onAnchorClick你可以设置锚点href的canvasbase64图像和锚下载属性为任何你想命名你的形象。
这在（当前）IE中不起作用，因为它没有实现下载属性并阻止数据uris的下载。 但是，这可以通过使用window.navigator.msSaveBlob来解决。
所以你的锚点单击事件处理程序将如下（其中anchor ， canvas和fileName是范围查找）：
function onClickAnchor(e) { if (window.navigator.msSaveBlob) { window.navigator.msSaveBlob(canvas.msToBlob(), fileName); e.preventDefault(); } else { anchor.setAttribute('download', fileName); anchor.setAttribute('href', canvas.toDataURL()); } }
这是一个小提琴
该解决scheme允许您更改下载的文件的名称：
HTML：
<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();
@Wardenclyffe和SColvin，你们都试图用canvas来保存图像，而不是使用canvas'context。 你应该尝试ctx.toDataURL（）;
尝试这个 ：
var canvas1 = document.getElementById（“yourCanvasId”）;
var ctx = canvas1.getContext（“2d”）;
var img = new Image（）;
img.src = ctx.toDataURL（'image / png'）;
ctx.drawImage（IMG，200150）;
你也可以参考下面的链接：
http://tutorials.jenkov.com/html5-canvas/todataurl.html
http://www.w3.org/TR/2012/WD-html5-author-20120329/the-canvas-element.html#the-canvas-element
