您的位置：首页 > 移动开发 > 微信开发

Canvas与Image互相转换示例以及利用该技术实现微信长按自动识别二维码功能

2016-12-08 10:07 806 查看

现在扫描二维码已经很普遍，微信扫一扫即可，但是如果二维码是在自己的手机上呢？那就要用到微信里的一个功能了，手指长按二维码，会弹出自动识别的选项，点确定就可以看到二维码的内容了。那么怎么通过前端实现这个长按自动识别这个功能呢？

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

下面先来普及一下canvas和image互相转换的知识：

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

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

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas与Image互相转换示例</title>
</head>
<body>

<img src="./list-icon-5.png" 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>

$(function(){

// 把image转换为canvas对象
var photo = document.getElementById('photo');//这个必须用原生
var cDiv = convertImageToCanvas(photo);
$("#canvasDiv").append(cDiv);

// image-->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转换为image的
var myCanvas = document.getElementsByTagName("canvas")[0];
var img = convertCanvasToImage(myCanvas);
$("#convertedImg").append(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;
}
});

</script>
</body>
</html>

效果如下：

那么实现微信长按二维码识别的功能就很简单了，直接上代码吧~

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航