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

首先我们需要知道利用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>

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

  1. 随手记一次利用开源zxing生成带嵌入logo的二维码图片

    之前就在项目里面用过zxing生成二维码,最近另一个项目同样需要用到二维码,故重新在学了学利用zxing生成二维码 接下来先做准备工作了,因为我是用vs2013上开发的,故选择了.net4.5版本的z ...

  2. ZXing 生成、解析二维码图片的小示例

    概述 ZXing 是一个开源 Java 类库用于解析多种格式的 1D/2D 条形码.目标是能够对QR编码.Data Matrix.UPC的1D条形码进行解码. 其提供了多种平台下的客户端包括:J2ME ...

  3. 利用Spring Boot+zxing，生成二维码还能这么简单

    在网站开发中,经常会遇到要生成二维码的情况,比如要使用微信支付.网页登录等,本文分享一个Spring Boot生成二维码的例子,这里用到了google的zxing工具类. 本文目录 一.二维码简介二. ...

  4. 给通过canvas生成的二维码添加logo

    以jquery.qrcode为例来说, 生成二维码代码: 依赖jquery.js, jquery.qrcode.js //计算宽,高,中心坐标,logo大小 var width = 256,heigh ...

  5. 动态生成二维码并利用canvas合成出一张图片(类似海报、分享页)

    在前端开发并打算推广一个APP的时候,推广页是免不了的,而推广页的展示方式一般是给人家一个二维码,让别人自己去安装APP,这样前段任务也达到了,这次写这篇文章的原因主要还是总结一下,其中有很多不完善的 ...

  6. javascript利用canvas解析图片中的二维码

    本方法两种应用方式:一种使用canvas解析本站图片中的二维码,canvas有同源策略限制,只能处理本站图片.另一种处理文件选择中的图片二维码. 第一种使用场景可以换成像微信中一样,长按图片识别二维码 ...

  7. Android利用zxing生成二维码

    感谢大佬:https://blog.csdn.net/mountain_hua/article/details/80646089 **gayhub上的zxing可用于生成二维码,识别二维码 gayhu ...

  8. android利用zbar二维码扫描-(解决中文乱码及扫描区域定义)

    写在最前(这是对上一篇博文的问题做的更新[android利用zbar二维码扫描]) project下载   zbarLib编译project  project下载0积分 bug 在2.3的系统中Hol ...

  9. 【转】Android平台下利用zxing实现二维码开发

    http://www.cnblogs.com/dolphin0520/p/3355728.html 现在走在大街小巷都能看到二维码,而且最近由于项目需要,所以研究了下二维码开发的东西,开源的二维码扫描 ...

随机推荐

  1. 【BZOJ2243】[SDOI2011] 染色（树链剖分）

    点此看题面 大致题意: 有一棵\(n\)个节点的无根树和\(m\)个操作,且每个节点有一个颜色.操作有两种:一种是将两点树上路径之间所有点染成颜色\(c\),另一种是询问两点树上路径之间颜色段的数量. ...

  2. 使用Scanner类获取键盘输入的会员卡号，并将该数据存储在变量中，输出这个变量的信息

    package come.one01;import java.util.Scanner; // 导入Scanner类public class One03 { public static void ma ...

  3. R+hadoop

    这里面的配置 http://www.rdatamining.com/big-data/r-hadoop-setup-guide root@kali:~/hadoop_home/hadoop-1.2.1 ...

  4. Oracle Hint 之 Append

    1 描述 所谓直接路径操作,就是绕过buffer cache,直接将数据插入到表所在的数据文件中: 假如有表A,要将A中的数据插入到表B,在普通的间接插入下,先将A中的数据块传进buffer cach ...

  5. 三、Shell 传递参数

    Shell 传递参数 我们可以在执行 Shell 脚本时,向脚本传递参数,脚本内获取参数的格式为:$n.n 代表一个数字,1 为执行脚本的第一个参数,2 为执行脚本的第二个参数,以此类推…… 实例 以 ...

  6. LeetCode948-令牌放置

    问题:令牌放置 你的初始能量为 P,初始分数为 0,只有一包令牌. 令牌的值为 token[i],每个令牌最多只能使用一次,可能的两种使用方法如下: 如果你至少有 token[i] 点能量,可以将令牌 ...

  7. 课时21.img标签（掌握）

    1.img标签中的img其实是英文image的缩写,所以img标签的作用,就是告诉浏览器我们需要显示一张图片 2.img标签格式:<img src=" ">  img是 ...

  8. 【JS】实时监控页面，input框数值自动求和

    需求: 有一个页面需要将input框填入的各个费用自动相加,添加到“合计费用”里. 解决方案: 使用jquery的blur实践,每个费用的Input框检测到失去焦点时,将所有的input框数值相加求和 ...

  9. JZOJ 5793. 【NOIP2008模拟】小S练跑步

    5793. [NOIP2008模拟]小S练跑步 (File IO): input:run.in output:run.out Time Limits: 2000 ms  Memory Limits:  ...

  10. North American Invitational Programming Contest (NAIPC) 2016

    (待补) A. Fancy Antiques 爆搜. B. Alternative Bracket Notation C. Greetings! D. Programming Team 0/1分数规划 ...