qrcode加背景圖

岁月淡忘了谁發表於2024-08-14

程式碼如下（圖片放到伺服器上，否則會有跨域問題）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的推廣</title>
</head>
<body>
    <input id="code-url" type="hidden" value="http://www.baidu.com"/><br />
    <div id="mid-qrcode"></div>
    <div id="divOne"></div>

<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script type="text/javascript">
    $(function(){
        var qrcode= $('#divOne').qrcode({
            text: $("#code-url").val(),
            width: 150,
            height: 150,
        }).hide();
        var canvas=qrcode.find('canvas').get(0);
        var data_codeImg = canvas.toDataURL('image/jpg');//圖片base64位字串
        data = [
            'bg.png', //背景海報圖
            data_codeImg
        ], base64 = [];
        function draw(fn) {
            var c = document.createElement('canvas'),  // 獲取canvas物件( 透過選擇器選擇canvas元素 )
                ctx = c.getContext('2d'),  // 透過canvas獲取他的上下文繪製環境( context )
                len = data.length;
            c.width = 1125;  // 畫布寬   canvas的預設寬度與高度:寬度:300,高度:150 注：canvas的寬度與高度，只能透過行間屬性或者js動態修改，不要透過樣式去修改，否則獲取到的寬度與高度不準
            c.height = 536;  // 畫布高
            ctx.rect(0, 0, c.width, c.height);  // 建立矩形 引數：繪製起點x座標，繪製起點y座標，矩形寬（畫素），矩形高（畫素）
            ctx.fillStyle = '#fff';
            ctx.fill();
            function drawing(n) {
                if (n < len) {
                    var img = new Image;
                    img.src = data[n];
                    img.onload = function () {
                        if (n === 1) {
                            // 畫圖 引數：圖片物件，相對畫布的起點x座標，
                            // 相對畫布的起點y座標，繪製的圖片寬度（二維碼，px），繪製的圖片高度（二維碼，px）
                            ctx.drawImage(img, 60, 160, 250, 250);
                        }
                        else if(n === 0){
                            ctx.drawImage(img, 0, 0, c.width,  c.height);
                        }
                        drawing(n + 1);//遞迴
                    }
                } else {
                    //儲存生成作品圖片
                    base64.push(c.toDataURL("image/jpeg", 0.8));
                    fn();
                }
            }
            drawing(0);
        }
        // 呼叫
        function hecheng() {
            draw(function () {
                document.getElementById("mid-qrcode").innerHTML = '<img src="'+base64[0]+'">';
            });
        }
        hecheng()
    });
</script>
</body>
</html>

相關文章