首页 - 文章 - WP教程与插件, 网页开发设计 - 正文

每一篇文章生成独有的二维码

付涛纪实阁 WP教程与插件,网页开发设计 2018年3月26日 百度已收录

1.40K 0 0

今天想到一个问题，如果我们通过摇一摇可以直接拨打电话、可以直接打开网页，那么我们可不可以通过摇一摇打开一个包括我们微信公众号或者微信客服的二维码页面，然后直接长按识别添加好友呢；

摇一摇打开网页或拨打电话

提到摇一摇，我们第一念头就是微信，就好像微信因为QQ的前期大力支持发杨光大一样，摇一摇也因为微信的存在，在一个短暂的时间内，成了众人所知的热门应用，微信里面的摇一摇是摇出了同一时间......

阅读全文

首先我们需要知道利用jquery的二维码生成插件jquery.qrcode.min.js，制作的二维码是在canvas元素中的。而微信中我们点击的那个二维码则是img元素。这时，我们就会想，只要把canvas中的二维码转换成img形式。

【内容来源于：https://www.diebaosoft.com/】，未经授权，谢绝转载

把img转换为canvas对象

function convertImageToCanvas(image){
//创建canvas DOM对象,并设置其宽高和图片一样
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
//坐标(0,0)表示从此处开始绘制,相当于偏移
canvas.getContext("2d").drawImage(image,0,0);
return canvas;
}

把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;
}

目标页面调用

<img src="./list-icon-5.png" alt="每一篇文章生成独有的二维码" alt="" id="photo" width="17" height="24">
<div id="canvasDiv" style="width: 300px; height: 30px;"></div>
<div id="convertedImg"></div>
<script src="./jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>

注：此处的两段JS需要额外下载

页面完整代码演示如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery实现微信长按识别二维码功能</title>
<script src="./jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
</head>
<body>
<!--canvas中的二维码-->
<div id="qrDiv" style="display: none;"></div>
<!--image形式的二维码-->
<div id="imgDiv"></div>
<script>
$(function(){
//利用插件生成二维码,生成的二维码在canvas中
$('#qrDiv').qrcode({
width: 120,
height:120,
text: "https://www.baidu.com/"
});
//从canvas中提取图片image
function convertCanvasToImage(canvas) {
//新Image对象，可以理解为DOM
var image = new Image();
// canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
// 指定格式PNG
image.src = canvas.toDataURL("image/png");
return image;
}
//获取网页中的canvas对象
var mycanvas1=document.getElementsByTagName('canvas')[0];
//将转换后的img标签插入到html中
var img = convertCanvasToImage(mycanvas1);
$('#imgDiv').append(img);//imgDiv表示你要插入的容器id
})
</script>
</body>
</html>