前言
做一个收款码模板生成,利用canvas
转base64图片,可以正常的点击下载图片,但是有一个图片点击下载没反应,手动保存图片以后发现图片2.1MB,就知道肯定八九不离十是因为图片太大了,于是想到了Blob
Web 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();
1 条评论