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

来源：互联网发布：jasper许静淘宝编辑：程序博客网时间：2024/05/17 01:55

二维码简介
定位图案Position Detection Pattern是定位图案，用于标记二维码的矩形大小。这三个定位图案有白边叫Separators for Postion Detection Patterns。之所以三个而不是四个意思就是三个就可以标识一个矩形了。Timing Patterns也是用于定位的。原因是二维码有40种尺寸，尺寸过大了后需要有根标准线，不然扫描的时候可能会扫歪了。Alignment Patterns 只有Version 2以上（包括Version2）的二维码需要这个东东，同样是为了定位用的。功能性数据Format Information 存在于所有的尺寸中，用于存放一些格式化数据的。Version Information 在 >= Version 7以上，需要预留两块3 x 6的区域存放一些版本信息。数据码和纠错码除了上述的那些地方，剩下的地方存放 Data Code 数据码和 Error Correction Code 纠错码。

这里写图片描述

现在扫描二维码已经很普遍，微信扫一扫即可，但是如果二维码是在自己的手机上呢？那就要用到微信里的一个功能了，手指长按二维码，会弹出自动识别的选项，点确定就可以看到二维码的内容了。那么怎么通过前端实现这个长按自动识别这个功能呢？首先我们需要知道利用jquery的二维码生成插件jquery.qrcode.min.js，制作的二维码是在canvas元素中的。而微信中我们点击的那个二维码则是img元素。这时，我们就会想，只要把canvas中的二维码转换成img形式，不就可以啦。没错，就是这么简单！下面先来普及一下canvas和image互相转换的知识：

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

示例代码:

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

阅读全文

0 0