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

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

首先我们需要知道利用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互相转换示例以及利用该技术实现微信长按自动识别二维码功能的更多相关文章

随手记一次利用开源zxing生成带嵌入logo的二维码图片
之前就在项目里面用过zxing生成二维码,最近另一个项目同样需要用到二维码,故重新在学了学利用zxing生成二维码接下来先做准备工作了,因为我是用vs2013上开发的,故选择了.net4.5版本的z ...
ZXing 生成、解析二维码图片的小示例
概述 ZXing 是一个开源 Java 类库用于解析多种格式的 1D/2D 条形码.目标是能够对QR编码.Data Matrix.UPC的1D条形码进行解码. 其提供了多种平台下的客户端包括:J2ME ...
利用Spring Boot+zxing，生成二维码还能这么简单
在网站开发中,经常会遇到要生成二维码的情况,比如要使用微信支付.网页登录等,本文分享一个Spring Boot生成二维码的例子,这里用到了google的zxing工具类. 本文目录一.二维码简介二. ...
给通过canvas生成的二维码添加logo
以jquery.qrcode为例来说, 生成二维码代码: 依赖jquery.js, jquery.qrcode.js //计算宽,高,中心坐标,logo大小 var width = 256,heigh ...
动态生成二维码并利用canvas合成出一张图片(类似海报、分享页)
在前端开发并打算推广一个APP的时候,推广页是免不了的,而推广页的展示方式一般是给人家一个二维码,让别人自己去安装APP,这样前段任务也达到了,这次写这篇文章的原因主要还是总结一下,其中有很多不完善的 ...
javascript利用canvas解析图片中的二维码
本方法两种应用方式:一种使用canvas解析本站图片中的二维码,canvas有同源策略限制,只能处理本站图片.另一种处理文件选择中的图片二维码. 第一种使用场景可以换成像微信中一样,长按图片识别二维码 ...
Android利用zxing生成二维码
感谢大佬:https://blog.csdn.net/mountain_hua/article/details/80646089 **gayhub上的zxing可用于生成二维码,识别二维码 gayhu ...
android利用zbar二维码扫描-(解决中文乱码及扫描区域定义)
写在最前(这是对上一篇博文的问题做的更新[android利用zbar二维码扫描]) project下载 zbarLib编译project project下载0积分 bug 在2.3的系统中Hol ...
【转】Android平台下利用zxing实现二维码开发
http://www.cnblogs.com/dolphin0520/p/3355728.html 现在走在大街小巷都能看到二维码,而且最近由于项目需要,所以研究了下二维码开发的东西,开源的二维码扫描 ...

随机推荐

NOIP2018初赛解题报告
前言 \(NOIP2018\)初赛已经结束了,接下来就要准备复赛了. 不过,在此之前,还是先为初赛写一篇解题报告吧. 单项选择题送分题.(虽然我还是做错了)可以考虑将它们全部转化为\(10\)进制, ...
click
click简介 Click是一个Python包,用于以可组合的方式创建漂亮的命令行界面,只需要很少的代码.这是“命令行界面创建工具包”.它具有高度可配置性,但具有开箱即用的合理默认值. 点击三点: 任 ...
C# 接口慨述
接口(interface)用来定义一种程序的协定.实现接口的类或者结构要与接口的定义严格一致.有了这个协定,就可以抛开编程语言的限制(理论上).接口可以从多个基接口继承,而类或结构可以实现多个接口.接 ...
记录一些 FileZillaClient 的基本连接操作
本地主机:Window 10 FileZilla版本:3.39.0 64位远程主机:CentOS 6.4 需安装FTP服务小提示:查看CentOS版本命令 # cat /etc/issue Fil ...
SpringMVC 多视图解析器跳转问题
在SpringMVC的配置文件中加入以下配置:  <mvc:default-servlet-handler /> <bean id ...
（76）zabbix_agentd.conf配置文件详解
############ GENERAL PARAMETERS ################# ### Option: PidFile# Name of PID file.# Agent PID文 ...
Freemaker基于word模板动态导出汇总整理
Freemaker基于word模板动态导出汇总整理一.使用的jar包: 二.Word模板动态导出的基本思路: 1.首先通过自己在word中创建好需要导出的word文本+表格的模板,模板中需要填写内容 ...
二 python并发编程之多进程-重点
一 multiprocessing模块介绍 python中的多线程无法利用多核优势,如果想要充分地使用多核CPU的资源(os.cpu_count()查看),在python中大部分情况需要使用多进程.P ...
Java堆内存又溢出了！教你一招必杀技
JAVA堆内存管理是影响性能主要因素之一.堆内存溢出是JAVA项目非常常见的故障,在解决该问题之前,必须先了解下JAVA堆内存是怎么工作的. 先看下JAVA堆内存是如何划分的,如图: JVM内存划分为 ...
CMSIS-DAP仿真器_学习（转载）
先给大家普及一下,哈哈.CMSIS-DAP仿真器,是ARM官方做的开源仿真器,没有版权,自由制作.官方给的源代码,使用的是NXP的单片机LPC4320做的.这个源代码,只要你安装了KEIL5,就可以找 ...

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

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

随机推荐

热门专题