评论

关于前端h5生成的base64二维码图片,保存到相册的问题

h5生成二维码,并保存到相册

注册成功后,前端通过后端给的含有邀请码的链接,让我这边来生成二维码。

使用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,
  width500,
  height500,
  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,
 });
}
最后一次编辑于  2021-05-15  
点赞 0
收藏
评论

4 个评论

  • 翩若惊鸿
    翩若惊鸿
    2021-10-21

    花里胡哨不实用`const b64toBlob = (base64, type = 'application/octet-stream') => fetch(base64).then((res) => res.blob());

    `

    2021-10-21
    赞同 1
    回复
  • 聪明女孩💐 🌺 🌹丨
    聪明女孩💐 🌺 🌹丨
    发表于移动端
    2021-05-15
    为什么没有登录小号?
    2021-05-15
    赞同
    回复
  • 聪明女孩💐 🌺 🌹丨
    聪明女孩💐 🌺 🌹丨
    发表于移动端
    2021-05-15
    为什么没有登录小号?
    2021-05-15
    赞同
    回复
  • 李家细黑
    李家细黑
    发表于移动端
    2021-05-15
    V N。::: 八一:一:,一 八丶
    2021-05-15
    赞同
    回复
登录 后发表内容