如何使用canvas.toDataURL()将画布保存为图像？
如何使用canvas.toDataURL()将画布保存为图像？
提问于 2012-05-20 19:46:31
我目前正在构建一个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>回答 11
Stack Overflow用户
发布于 2013-03-28 23:16:41
下面是一些代码。没有任何错误。
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 locallyStack Overflow用户
发布于 2017-06-12 03:28:58
此解决方案允许您更改下载文件的名称：
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();Stack Overflow用户
发布于 2012-05-20 20:39:56
您可以使用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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10673122
复制相关文章
相似问题