js如何将base64格式的图片下载保存到本地
墨初 Web前端 45937阅读
做了一个web页面图片处理的小工具,由于图片的处理是以base64格式进行,在将图片保存下载到本地时,就需要使用JS将base64的图片转换为普通图片并下载到本地,下面是使用方法。
js将base64图片下载保存到本地的方法
示例代码:
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
function downloadFile(url,name){
var a = document.createElement("a") //新建一个a链接
a.setAttribute("href",url) // a链接的url为图片的url
a.setAttribute("download",name)
a.setAttribute("target","_blank")
let clickEvent = document.createEvent("MouseEvents");
clickEvent.initEvent("click", true, true);
a.dispatchEvent(clickEvent);
}
// 73so.com
function downloadFileByBase64(base64,name){
var myBlob = dataURLtoBlob(base64);
var myUrl = URL.createObjectURL(myBlob); //创建图片的临时url
downloadFile(myUrl,name)
}调用方法:
var baseimg = 'data:image/png;base64,sdfsdf.......'; var name = new Date().getTime(); //自定义图片名称 downloadFileByBase64(baseimg,name);
注意:
1、在使用上面的代码之前必须判断一下是不是图片类型的base64
2、需要处理的base64字符串必须以“data:image”开头。
3、下载的文件名,自定义即可