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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM