关于前端h5生成的base64二维码图片,保存到相册的问题
注册成功后,前端通过后端给的含有邀请码的链接,让我这边来生成二维码。
使用QRcode一下子就完成了。但是有一个问题,就是生的二维码是base64的,长按无法保存图片。
试了很多方法,就是不行。
然后我长按一个是本地图片或者网络图片,都可以保存。我猜想一定是base64的问题。
然后我将QRcode生成的base64编码,先解码,再创建缓冲数组和视图,然后转换成Blob对象,再转换成url,将url 弄到img src属性上,完美收官。
贴上代码
var url = 'xxx' // 你的链接
var div = document.createElement('div');
var code = new QRCode(div, {
text: url,
width: 500,
height: 500,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H,
});
var canvas = code._el.querySelector('canvas');
var base64Text = canvas.toDataURL('image/png');
var blob = getBlob(base64Text);
var url_link = window.URL.createObjectURL(blob);
// 将这个url赋值给img的src属性即可
function getBlob(base64) {
var mimeStr = base64.split(',')[0].split(':')[1].split(';')[0]; // mime类型
var byteStr = atob(base64.split(',')[1]); //base64 解码
var arrayBuffer = new ArrayBuffer(byteSt.length); //创建缓冲数组
var intArray = new Uint8Array(arrayBuffer); //创建视图
for(var i = 0; i < byteStr.length; i += 1) {
intArray[i] = byteStr.charCodeAt(i);
}
return new Blob([intArray], {
type: mimeStr,
});
}