基于canvas的图片保存

xiaoxiao2021-02-28  81

我们希望有的时候把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属性将图片保存到本地,并取名字。

是不是很简单   欢迎大家阅读我其他的文章

转载请注明原文地址: https://www.6miu.com/read-66150.html

最新回复(0)