我们希望有的时候把canvas画板上的图像保存为图片,那么需要怎么做那
这里 我们可以利用 HTML5 <a>标签的download属性。
download属性可以被赋值,用来指明下载文件的名称
先贴代码
function convertCanvasToImage(canvas,type,name) { var image = new Image(); var imgdata = canvas.toDataURL("image/png"); var fixtype = function (type) { type = type.toLocaleLowerCase().replace(/jpg/i, 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/)[0]; return 'image/' + r; }; imgdata = imgdata.replace(fixtype(type), 'image/octet-stream'); //将图片保存到本地 var saveFile = function (data, filename) { var link = document.createElement('a'); link.href = data; link.download = filename; link.click(); }; var filename = name + '.' + type; saveFile(imgdata, filename); } 里面传递的参数 第一个当然是选择的画板了,第二个则是要保存文件的类型,第三个则是文件的名字
首先 先创建 新的newImage 之后通过字符串操作,把base64的标题头 改为image/octet-stream
原理是我们修改DataURL的Mime-type为octet-stream,强制让浏览器下载。
最后我们利用a标签的download属性将图片保存到本地,并取名字。
是不是很简单 欢迎大家阅读我其他的文章