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

首先我们需要知道利用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. top命令交互快捷键

    #toptop - :: up :, users, load average: 0.17, 0.12, 0.14 Tasks: total, running, sleeping, stopped, z ...

  2. BZOJ 3873: [Ahoi2014]拼图

    BZOJ 3873: [Ahoi2014]拼图 标签(空格分隔): OI-BZOJ OI-DP Time Limit: 10 Sec Memory Limit: 256 MB Description ...

  3. 2018.7.1 css项目之模仿满屋花首页css+idv布局实现

    可以分开写 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF ...

  4. 2018.6.19 Java核心API与高级编程实践复习总结

    Java 核心编程API与高级编程实践 第一章 异常 1.1 异常概述 在程序运行中,经常会出现一些意外情况,这些意外会导致程序出错或者崩溃而影响程序的正常执行,在java语言中,将这些程序意外称为异 ...

  5. 2018.6.15 Java对象序列化详解

    一.定义 Serializable 序列化:把Java对象转换为字节序列的过程. 反序列化:把字节序列恢复为Java对象的过程. ObjectOutputStream对象输出流 可以将实现了Seria ...

  6. python_43_移动文件指针补充

    #移动文件指针补充 ''' 文件对象.seek((offset,where)) offset:移动的偏移量,单位为字节.等于正数时向文件尾方向移动,等于负数时向文件头方向移动文件指针 where:指针 ...

  7. AngularJs学习笔记-数据绑定、管道

    数据绑定.管道 (1)数据绑定(Angular中默认是单向绑定) 1.[]方括号 可以用于子组件传值 由于是单向绑定,所以当子组件中的iStars属性发生改变时,不会影响到父组件中product.ra ...

  8. GNU Parallel Tutorial

    GNU Parallel Tutorial Prerequisites Input sources A single input source Multiple input sources Linki ...

  9. Android驱动开发5-7总结

    Android深度探索5-7章总结 介绍了S3C6410开发板的功能,开发板的不同主要是在烧录嵌入式系统的方式不同,以及如何在此开发板上安装Android.紧接着学到介绍到如何在多种平台,使用多种方式 ...

  10. （SSO）单点登录原理和总结

    一:什么是单点登录(single Sign-On) SSO 是一种统一认证和授权机制,指访问统一服务器不用应用中的受保护资源的同一用户,只需要登录一次,即通过一个应用中的安全验证后, 再访问其他应用中 ...