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

首先我们需要知道利用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. 【HDU1542】Atlantis （扫描线的经典运用）

    点此看题面 大致题意: 给你\(N\)个矩形,请你求出它们覆盖的面积(重叠的面积只算一次). 扫描线 这道题是一道典型的求矩形面积并问题,是扫描线的一个经典运用.这里就不赘述了. 代码 #includ ...

  2. vuejs属性绑定和双向绑定

    属性绑定 html <div v-bind:title="title">hello world</div> js new Vue({ el:'#root', ...

  3. android studio 安装以及遇到的一些问题

    1 安装 jkd ,版本一般是最新的,下怎么样的看一下自己电脑符合那种要求,可以去官网下 https://www.oracle.com/technetwork/java/javase/download ...

  4. 重温 JSP 与 Servlet

    Java Web使用SSH框架多了,很多基础的 JSP 与 Servlet 的东西都忘记了.最近在 JSP 标签 和 Struts2 包装的 Session 对象的混合使用时弄晕了,就翻书温习下. J ...

  5. C# File和Directory类

    File和Directory类 作为实用类,File和Directory类都提供了许多方法,用于处理文件系统以及其中的文件和目录.这些是静态方法,涉及移动文件.查询和更新属性并创建FileStream ...

  6. 用express框架实现反向代理

    目前很多公司开发都是前后台分离开发,于是我用node起了一个服务,用node中的express框架实现了反向代理.(通俗易懂的讲就是我在我的电脑访问不到后台同事的电脑接口,这样做以后就可以在我本地访问 ...

  7. relu函数为分段线性函数，为什么会增加非线性元素

    relu函数为分段线性函数,为什么会增加非线性元素 我们知道激活函数的作用就是为了为神经网络增加非线性因素,使其可以拟合任意的函数.那么relu在大于的时候就是线性函数,如果我们的输出值一直是在大于0 ...

  8. python3.7 os模块

    #!/usr/bin/env python __author__ = "lrtao2010" #python3.7 os模块 #os模块是与操作系统交互的一个接口 # os.get ...

  9. 20190103（GIL，池，阻塞，同步异步）

    GIL锁 什么是GIL GIL全局解释器锁,是防止多个线程在同一时间同时执行的.CPython解释器特有的一种互斥锁. 每一个py文件都会有自己的解释器,也就是说不同py文件的GIL都是独立的, ps ...

  10. 动态规划：HDU1864-最大报销额（处理带小数的dp问题）

    最大报销额 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Descriptio ...