前言

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