1 canvas 畫二維碼
阿新 • • 發佈：2019-02-07
1，將網址轉換為二維碼並用canvas畫到頁面
效果
程式碼
<!--Created by Sukla on 2018/3/19.--> <!DOCTYPE html> <html> <head lang="en"> <title>canvas 例項</title> <meta charset="utf-8"> </head> <body> <script src="./js/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="./js/jquery.qrcode.js"></script> <script type="text/javascript" src="./js/qrcode.js"></script> <h2>draw in canvas</h2> <div id="Canvas"></div> <script> jQuery('#Canvas').qrcode({ text: "https://gui-sukla.github.io" }); // var Canvas = $('canvas')[0]; var CRC = Canvas.getContext('2d'); var img = new Image(); img.onload = function(){ draw(this); drawImg() }; img.src = './images/sukla.jpg'; function draw(obj){ CRC.drawImage(obj,100,100,50,50); } // function drawImg(){ var dataUrl = $('canvas')[0].toDataURL('images/'); var newImg = '<h2>draw canvas Img </h2>'; newImg += '<img src="' + dataUrl + '">'; $('body').append(newImg); } </script> </body> </html> </html>