微信端canvas对象转换为img对象长按扫描

微信端有时候后台传入一段链接需要生成二维码展示给用户,而不是一段长链接。现在的人宁愿扫二维码也不愿意点击陌生的链接。

当后台传入连接时需要使用jquery-qrcode生成canvas二维码

官网参考:https://github.com/jeromeetienne/jquery-qrcode

用法:

<div id="scanPayImg"></div>

$("#scanPayImg").qrcode({
  render: "canvas", //canvas方式
   160, //宽度
  height:160, //高度
  text: ret.payRedirect //任意内容 //一般是某个网址或者某个链接
});

这里有个问题了,在微信端canvas是无法长按扫描的,因为不是个img文件。。。所以还要把canvas转换成img

//从 canvas 提取图片 image
function convertCanvasToImage(canvas) {
  //新Image对象,可以理解为DOM
  var image = new Image();
  // canvas.toDataURL 返回的是一串Base64编码的URL,当然,浏览器自己肯定支持
  // 指定格式 PNG
  image.src = canvas.toDataURL("image/png");
  return image;
}

var mycanvas1=document.getElementsByTagName('canvas')[0]; //获取网页中的canvas对象 
//将转换后的img标签插入到html中
var img=convertCanvasToImage(mycanvas1);
$('#scanPayImg').html("");//移除已生成的避免重复生成
$('#scanPayImg').append(img);//imagQrDiv表示你要插入的容器id

原文地址:https://www.cnblogs.com/baifubin/p/6873324.html