<canvas id="myCanvas" width="750" height="1200" style="border:1px solid #d3d3d3;background:#ffffff;"></canvas>

var canvas = document.getElementById("myCanvas");   //獲取canvas節(jié)點function imageToCanvas(canvas,url1,url2,code) {      //傳入canvas節(jié)點 背景圖url1  頭像url2 二維碼code    var ctx = canvas.getContext("2d");      var img1 = new Image();                                   img1.src = url1;                     //前面的不解釋了，生成個圖片    img1.onload = function(){         ctx.drawImage(img1,0,0);              //當(dāng)圖片加載完成后 賦到畫布上 從0 0 開始。        var img2 = new Image();         img2.src = url2;         img2.onload = function(){          ctx.save();                            //保存當(dāng)前畫布狀態(tài)          ctx.arc(374, 134, 44, 0, 2 * Math.PI);    //剪切操作 將正方形的頭像切成圓的          // 從畫布上裁剪出這個圓形          ctx.clip();                             //進行裁剪          ctx.drawImage(img2, 330, 90, 88, 88);   //放入img2 在330 90坐標處     大小 88          ctx.restore();                           //釋放畫布狀態(tài)          ctx.font="28px Arial";          ctx.textAlign="center";          ctx.fillStyle ='#FFFFFF';               //前面是設(shè)置文字 屬性設(shè)為居中          ctx.fillText("你叫神馬名字",375,220);     //文字 這里是寫死的 實際中多傳個參數(shù)就ok          var img3 = new Image();          img3.src = code;          img3.onload = function() {              ctx.drawImage(img3,136,554,478,478);      //同理加圖像              var imgCode = convertCanvasToImage(canvas);    //將圖片轉(zhuǎn)為base64              console.log(imgCode.getAttribute('src'))          }         }    }}imageToCanvas(canvas,"1.png",'3.jpeg','code.png');            //初始化function convertCanvasToImage(canvas) {    var image = new Image();     image.src = canvas.toDataURL("image/png");            //canvas轉(zhuǎn)化為img    return image;}