关于前端h5生成的base64二维码图片,保存到相册的问题
发布于 3 年前 作者 xiahan 4030 次浏览 来自 分享

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

使用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,
 });
}
3 回复

为什么没有登录小号?

为什么没有登录小号?

V N。::: 八一:一:,一 八丶

回到顶部