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

首先我们需要知道利用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. ARM体系结构与编程-3

    ARM存储系统:ARM中用于存储管理的系统控制协处理器CP15:包括16个32位寄存器,其编号为0到15.实际上对于某些编号的寄存器可能相应有多个物理寄存器. 訪问CP15寄存器的指令:MRC.MCR ...

  2. [超详细] Python3爬取豆瓣影评、去停用词、词云图、评论关键词绘图处理

    爬取豆瓣电影<大侦探皮卡丘>的影评,并做词云图和关键词绘图第一步:找到评论的网页url.https://movie.douban.com/subject/26835471/comments ...

  3. python 线程even

    import threading,time import random def door(nums): num=1#电梯在一楼 while True: print("this door is ...

  4. C#关系运算符

    一.C#关系运算符 C#语言的关系运算符是对操作数的比较运算. 二.示例 using System;using System.Collections.Generic;using System.Linq ...

  5. React 服务端渲染最佳解决方案

    最近在开发一个服务端渲染工具,通过一篇小文大致介绍下服务端渲染,和服务端渲染的方式方法.在此文后面有两中服务端渲染方式的构思,根据你对服务端渲染的利弊权衡,你会选择哪一种服务端渲染方式呢? 什么是服务 ...

  6. 关于html标签的两种隐藏方式

    做一个文章管理模块 有一个功能是需要根据文章分类来显示内容的标签 刚开始以为很简单 ,手放键盘上就是一顿敲. 如果类型是文章就是没问题  可是另外几种就有问题了 红框的标签一直不出来 后来找了半天然来 ...

  7. 项目实战2.3-Nginx的“远方表哥”—Tengine

    本文收录在Linux运维企业架构实战系列 今天想起当初研究nginx反向代理负载均衡时,nginx自身的upstream后端配置用着非常不舒服: 当时使用的淘宝基于nginx二次开发的Tengine, ...

  8. 制定RPM包和加入YUM源

    ##################################################### ##如有转载,请务必保留本文链接及版权信息 ##欢迎广大运维同仁一起交流linux/unix ...

  9. Emgu.CV.CvInvoke的类型初始值设定项引发异常

    被这个问题蛋疼了一个下午,终于解决了.我的服务器出现这个问题的原因:可能是没有安装emgucv. 解决方法: 1.下载并安装emgucv 下载地址:链接: https://pan.baidu.com/ ...

  10. tcl之list操作