最终生成可长按保存的图片

function drawAndShareImage(wxPhoto,wxName){
        var canvas = document.createElement("canvas");
        canvas.width = 552;
        canvas.height = 860;
        var context = canvas.getContext("2d");

        context.rect(0 , 0 , canvas.width , canvas.height);
        context.fillStyle = "#fff";
        context.fill();

        var myImage = new Image();
        myImage.src = "img/share/bg.jpg";    //背景图片 本地的图片或者在线图片
        myImage.crossOrigin = 'Anonymous';

        myImage.onload = function(){
            context.drawImage(myImage , 0 , 0 , 552 , 860);

            context.font = "27px 微软雅黑";
            context.fillText(wxName,282,175);

            var myImage2 = new Image();
            myImage2.src = wxPhoto;   //本地的图片或者在线图片
            myImage2.crossOrigin = 'Anonymous';

            myImage2.onload = function(){
                context.drawImage(myImage2 , 60 , 145 , 115 , 115);
                var base64 = canvas.toDataURL("image/png");  //"image/png" 这里注意一下
                var img = document.getElementById('save');

                // document.getElementById('avatar').src = base64;
                img.setAttribute('src' , base64);
            }
        }
    }

  如果多张图片,可以自行添加

var myImage3 = new Image();
myImage3.src = wxPhoto;   //本地的图片或者在线图片
myImage3.crossOrigin = 'Anonymous';
加载时load进去:
context.drawImage(myImage3 , 60 , 145 , 115 , 115);

  

猜你喜欢

转载自www.cnblogs.com/Cina/p/9687304.html