如何将图像保存到画布上？
如何将图像保存到画布上？
提问于 2013-02-28 19:47:02
我正在画布上画一幅画。然后我想保存图像。我尝试过canvas.toDataURL("image/png")，但我意识到出于安全原因我不能使用toDataURL()。但是，我必须保存图像。如何保存图片？
这是我的示例源代码。
window.onload = function(){
var oCanvas = document.getElementById("work_pallet");
var oContext = oCanvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function() {
oContext.drawImage(imageObj, 0, 0, oCanvas.width, oCanvas.height);
}
imageObj.src = "http://www.ehanftp.co.kr/ueditor/data/20130204/mini2/guide.pdf_1.png";
function saveImage(){
var bRes = false;
alert(oCanvas.toDataURL());
bRes = Canvas2Image.saveAsPNG(oCanvas);
if (!bRes) {
alert("Sorry, this browser is not capable of saving image!");
return false;
}
}
document.getElementById("saveCanvasImage").onclick = function() {
saveImage();
}
}回答 1
Stack Overflow用户
发布于 2013-02-28 19:51:33
示例：
<html>
<head>
<script src="http://www.nihilogic.dk/labs/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/15134748
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号