hi,欢迎访问本站!
当前位置: 首页Web前端正文

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、下载的文件名,自定义即可

声明:无特别说明,转载请标明本文来源!
相关推荐