JavaScript实现点击下载Base64图片

作者 : 小檬 本文共625个字,预计阅读时间需要2分钟 发布时间: 2021-08-18 共243人阅读

前言

做一个收款码模板生成,利用canvas转base64图片,可以正常的点击下载图片,但是有一个图片点击下载没反应,手动保存图片以后发现图片2.1MB,就知道肯定八九不离十是因为图片太大了,于是想到了BlobWeb API接口,查了一下资料完美解决了此问题。

实现代码

function dataURIToBlob(dataURI) {
    let binStr = atob(dataURI.split(',')[1]),
        len = binStr.length,
        arr = new Uint8Array(len);
    while (len--) {
        arr[len] = binStr.charCodeAt(len);
    }
    return new Blob([arr], {type: 'image/png'})
}

const blurb = dataURIToBlob(document.getElementById('endImg').src)
let temp = document.createElement('a');
temp.href = URL.createObjectURL(blurb);
temp.download = '三合一收款码';
document.body.append(temp);
temp.click();
URL.revokeObjectURL(blurb);
temp.remove();

相关资料

https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

乐檬资源网提供
乐檬资源网 » JavaScript实现点击下载Base64图片

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。

发表评论

提供最优质的资源集合

立即查看 了解详情