breathlife

业务需求,手机微信公众号内生成二维码,点击后可保存图片

运用jquery qrcode.js 可生成二维码,因为是使用的canvas,所以注意一定要支持H5,
代码如下

JS:
$(\'#code\').qrcode("http://www.baidu.com")

HTML:
<div id="code"></div> 

代码很简单,但在手机微信中遇到了问题。
canvas是直接在页面中绘制的二维码,手机微信中无法点击保存分享或者识别二维码。

解决方法,通过canvas的toDataURL("image/jpeg");将绘制的二维码转成img图片,代码如下

JS:
var canvas = document.getElementsByTagName(\'canvas\')[0];
var image = new Image();
image.src = canvas.toDataURL("image/jpeg");
document.getElementById(\'image\').src=image.src;

HTML:
<img id="image">

将canvas转存到img中,之后就可以在手机上保存了
还有一点需要注意的,记得转存后把canvas删掉,要不然会显示两个二维码,也会导致img重复取第一个canvas的值。

分类:

技术点:

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-05-19
  • 2021-03-31
  • 2021-12-26
  • 2021-07-20
  • 2022-12-23
猜你喜欢
  • 2021-08-27
  • 2022-12-23
  • 2021-12-03
  • 2022-12-23
  • 2022-12-23
  • 2021-12-16
  • 2021-11-21
相关资源
相似解决方案