canvas pictures merge and save

drawImg:function(){
        var w = document.documentElement.clientWidth || document.body.clientWidth;
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        h-=70;
        var img1 = new Image();
        img1.src = '../../assets/img/F01/share-bg.png';
        var canvas = document.createElement('canvas');
        img1.onload = function(){
            canvas.width = w;
            canvas.height = h;
            var ctx=canvas.getContext("2d");
            ctx.drawImage(img1, 0, 0, ctx.canvas.width, ctx.canvas.height);
            var img= new Image();
            img.src='../../assets/img/F01/qr-code.png';
            img.onload=function(){
                //ctx.drawImage(img, w-h/6.67-28, h-h/6.67-38, h/6.67, h/6.67);
                ctx.drawImage(img, (w-h/6.67)/2, h-h/6.67-38, h/6.67, h/6.67);
                Page.downloadFile('share.png', canvas.toDataURL("image/png"));
            };
        }
    },
    base64Img2Blob:function(code){
        var parts = code.split(';base64,');
        var contentType = parts[0].split(':')[1];
        var raw = window.atob(parts[1]);
        var rawLength = raw.length;
        var uInt8Array = new Uint8Array(rawLength);
        for (var i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {type: contentType});
    },
    downloadFile:function(fileName, content){
        var aLink = document.querySelector('.share-btn');
        var blob = Page.base64Img2Blob(content);
        aLink.download = fileName;
        aLink.href = URL.createObjectURL(blob);
    }

 

Guess you like

Origin blog.csdn.net/u012615439/article/details/88421288