1 canvas 画二维码

最新推荐文章于 2025-09-13 14:33:24 发布

原创最新推荐文章于 2025-09-13 14:33:24 发布 · 2.4k 阅读

3 ·

CC 4.0 BY-SA版权

Canvas绘图专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用HTML5 Canvas绘制二维码的方法，并展示了如何通过jQuery插件实现这一过程。该示例利用了jquery.qrcode.js和qrcode.js库，将一个指定的URL转换成二维码，并直接在网页上显示。

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>