解决生成的二维码手机上无法使用【长按识别】
之前写了一篇文章,【不使用插件在网站的任何页面生成二维码】
原文地址:
一、问题
使用 jquery.qrcode.js 首先选择使用 canvas 进行图片的渲染,而不是使用table
使用 canvas 有一个致命的问题就是,生成二维码之后,
二、解决
使用table不会有这个问题,但是显示上兼容性之类的会有问题。
比较好的解决办法就是将
方法参照:https://my.oschina.net/ht896632/blog/737017 (感谢作者)
示例函数:
# 函数将canvas对象转换成img对象
function convertCanvasToImage(canvas) {
//构建新Image对象
var image = new Image();
// canvas.toDataURL 返回的是一串Base64编码的URL
// 指定格式 jpg
image.src = canvas.toDataURL("image/jpg");
return image;
}
// 获取页面上的第一个canvas元素,这个根据实际需要,可以结合ID或者是className来选择
var mycanvas1=document.getElementsByTagName('canvas')[0];
// 转成img
var img=convertCanvasToImage(mycanvas1);
// 将原来的div内容替换掉
$('#qrcodeContent').html(img);
三、完整的页面二维码使用
结合之前文章中在网页上生成二维码,给出完整的使用方法,直接copy到要使用的地方即可。
当然前提是已经引入了jquery.qrcode.js:
<div style="text-align:center;">
<div id="qrcodeContent" >
</div>
<div style="padding:10px;">
<span>扫描二维码,在手机阅读!</span>
</div>
</div>
<script>
var options={
text : location.href, //设置二维码内容
render : "canvas",//设置渲染方式
width : 150, //设置宽度
height : 150, //设置高度
typeNumber : -1, //计算模式
background : "#ffffff",//背景颜色
foreground : "#000000" //前景颜色
};
jQuery('#qrcodeContent').qrcode(options);
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];
var img=convertCanvasToImage(mycanvas1);
$('#qrcodeContent').html(img);
</script>
四、效果
换了个前景颜色
文章已经结束啦
文章版权:Postbird-There I am , in the world more exciting!
本文链接:http://www.ptbird.cn/canvas-qrcode-wechat-phone.html
转载请注明文章原始出处 !
扫描二维码,在手机阅读!