js如何将base64格式的图片下载保存到本地
墨初 Web前端 32529阅读
做了一个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、下载的文件名,自定义即可