canvas拼接背景圖和qrcode生成的二維碼,實現二維碼分享功能。


效果:

<script>
    //合並大圖片
    var data_codeImg = '<{$qrcode}>',
        data = [
            'images/images_get/bg.jpg',
            data_codeImg
        ], base64 = [];
    function draw(fn) {
        var c = document.createElement('canvas'),  // 獲取canvas對象( 通過選擇器選擇canvas元素 )
            ctx = c.getContext('2d'),  // 通過canvas獲取他的上下文繪制環境( context )
            len = data.length;
        c.width = 750;  // 畫布寬   canvas的默認寬度與高度:寬度:300,高度:150 注:canvas的寬度與高度,只能通過行間屬性或者js動態修改,不要通過樣式去修改,否則獲取到的寬度與高度不准
        c.height = 1262;  // 畫布高
        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, c.width/1.56, 920, 240, 240);
                    }
                    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('finally').innerHTML = '<img src="'+base64[0]+'">';
        });
    }
    hecheng()
</script>

 


免責聲明!

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



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