前端开发

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

2021-01-11 02:49:03 阅读数 4232 收藏 0

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>