前言

做一个收款码模板生成,利用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

最后修改:2021 年 03 月 13 日
如果觉得我的文章对你有用,请随意赞赏