将canvas保存为图片下载,canvas获取图片的数据
主要思想是借助帆布自己的API - toDataURL()来实现，整个实现
HTML JavaScript的代码很简单。复制代码代码如下：
超文本标记语言
meta http-equiv= X-UA-Compatible content= chrome=1
头
脚本
window.onload=function() {
draw()；
var保存按钮=文档。getelementbyid(“保存图像BTN”)；
bindButtonEvent(saveButton， click ，保存imageinfo)；
var dl button=文档。getelementbyid( downloadImageBtn )；
bindButtonEvent(dlButton， click ，saveAsLocalImage)；
};
函数draw(){
var canvas=文档。getelementbyid(“画布”)；
var CTX=画布。获取上下文(“2d”)；
ctx.fillStyle=rgba(125，46，138，0.5)；
ctx.fillRect(25，25，100，100)；
ctx.fillStyle=rgba( 0，146，38，0.5)；
CTX . fill rect(5874125100)；
ctx.fillStyle=rgba( 0，0，0，1)；//黑色
ctx.fillText(Gloomyfish - Demo ，50，50)；
}
函数bindButtonEvent(元素、类型、处理程序)
{
if(element.addEventListener) {
element.addEventListener(type，handler，false)；
}否则{
element.attachEvent(on 类型，处理程序);
}
}
函数saveImageInfo()
{
改变我画布=文档。getelementbyid(“画布”)；
var图像=我的画布。toda taurl( image/png )；
var w=window.open(about:blank ，来自画布的图像);
w。文档。write( img src= image alt= from canvas /)；
}
函数saveAsLocalImage () {
改变我画布=文档。getelementbyid(“画布”)；
//这是最重要的部分，因为如果你不替换，你将得到一个DOM 18异常。
//var image=我的画布。toda taurl( image/png ).替换( image/png ， image/octet-stream；内容-处置：依恋；filename=foobar。png’)；
var图像=我的画布。toda taurl( image/png ).替换( image/png ， image/octet-stream )；
窗户。位置。href=image//它将保存在本地
}
/脚本
/头
body bgcolor=#E6E6FA
差异
画布宽度=200高度=200 id=画布/画布
按钮id=saveImageBtn 保存图像/按钮
按钮id=downloadImageBtn 下载图像/按钮
/div
/body
/html运行效果如下:
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。