搜索
简帛阁>技术文章>将HTML5 Canvas的内容保存为图片借助toDataURL实现

将HTML5 Canvas的内容保存为图片借助toDataURL实现

主要思想是借助Canvas自己的API - toDataURL()来实现,整个实现
HTML + JavaScript的代码很简单。

复制代码
代码如下:

<html>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<head>
<script>
window.onload = function() {
draw();
var saveButton = document.getElementById("saveImageBtn");
bindButtonEvent(saveButton, "click", saveImageInfo);
var dlButton = document.getElementById("downloadImageBtn");
bindButtonEvent(dlButton, "click", saveAsLocalImage);
};
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);
ctx.fillStyle = "rgba( 0, 0, 0, 1)"; // black color
ctx.fillText("Gloomyfish - Demo", 50, 50);
}
function bindButtonEvent(element, type, handler)
{
if(element.addEventListener) {
element.addEventListener(type, handler, false);
} else {
element.attachEvent('on'+type, handler);
}
}
function saveImageInfo ()
{
var mycanvas = document.getElementById("thecanvas");
var image = mycanvas.toDataURL("image/png");
var w=window.open('about:blank','image from canvas');
w.document.write("<img src='"+image+"' alt='from canvas'/>");
}
function saveAsLocalImage () {
var myCanvas = document.getElementById("thecanvas");
// here is the most important part because if you dont replace you will get a DOM 18 exception.
// var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream;Content-Disposition: attachment;filename=foobar.png");
var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href=image; // it will save locally
}
</script>
</head>
<body bgcolor="#E6E6FA">
<div>
<canvas width=200 height=200 id="thecanvas"></canvas>
<button id="saveImageBtn">Save Image</button>
<button id="downloadImageBtn">Download Image</button>
</div>
</body>
</html>

运行效果如下
主要思想是借助Canvas自己APItoDataURL()来实现,整个实现HTML+JavaScript代码很简单。复制代码代码如下:<html><metahttpequivXU
canvas画布内容转化图片toDataURL(),创建url)总结1、现在浏览器都支持右键另存为图片方法来canvas画布内容转化图片2、在代码里面可以通过toDataURL()来操
使用JavaScript图片拷贝进画布要想将图片放入画布里,我们使用canvas元素drawImage方法:复制代码代码如下://Convertsimagetocanvas;returnsnewc
使用了jcanvas插件。复制代码代码如下:<head><scriptsrc'jquery191js'></script><scriptsrc'jcanvas
图片转为base64好处图片转换Base64编码,可以让你很方便地在没有上传文件条件下图片插入其它网页、编辑器中。这对于一些小图片是极为方便,因为你不需要再去寻找一个保存图片地方
如题,在页面图片地址进行本地输出时(Html2Canvasjs),因不同源存在跨域问题,会出现toDataURL访问权限问题:【Redirectatorigin'http://sub1xxcom'
本文实例大家分享了HTML5Canvas实现一个画板代码,供大家参考,具体内容如下<!DOCTYPEhtml><html><head><metachar
本文实例讲述了javascript+HTML5Canvas实现Lab单车动画效果。分享给大家供大家参考。具体如下:这里运用HTML5实现单车动画,运行一下效果你就明白了,不过不要在IE8下测试,没
本文实例大家分享了HTML5canvas绘制图片具体代码,供大家参考,具体内容如下demojswindowonloadfunction(){createcanvas();drawImage();}
获取Image对象,new出来定义Image对象src属性,参数:图片路径定义Image对象onload方法,调用context对象drawImage()方法,参数:Image对象,x坐标,y