一、背景：因為之前同事用java后端生成海報，導致海報加載緩慢，所以把它放到前端來拼接
二、菜鳥教程：https://www.runoob.com/html/html5-canvas.html
三、准備好需要的材料（圖片）
html
<!-- html中添加 --> <canvas id="myCanvas" width="200" height="100"></canvas>
<!-- jquery --> <!-- img1背景圖、img2二維碼、img3頭像 --> function drawAndShareImage(img1, img2, img3){ var canvas=document.getElementById("myCanvas"); //var canvas = document.createElement("myCanvas"); canvas.width = 700; canvas.height = 700; var context = canvas.getContext("2d"); context.rect(0 , 0 , canvas.width , canvas.height); context.fillStyle = "#fff"; context.fill(); var myImage = new Image(); myImage.src = img1; //背景圖片 你自己本地的圖片或者在線圖片 myImage.crossOrigin = 'Anonymous'; myImage.onload = function(){ context.drawImage(myImage , 0 , 0 , 500 , 500); context.font = "60px Courier New"; context.fillText("我是文字",500,500); var myImage2 = new Image(); myImage2.src = img2; //你自己本地的圖片或者在線圖片 myImage2.crossOrigin = 'Anonymous'; myImage2.onload = function(){ context.drawImage(myImage2 , 175 , 175 , 225 , 225); var base64 = canvas.toDataURL("image/png"); //"image/png" 這里注意一下 var img = document.getElementById('myCanvas'); // document.getElementById('avatar').src = base64; img.setAttribute('src' , base64); } var myImage3 = new Image(); myImage3.src = img3; //你自己本地的圖片或者在線圖片 myImage3.crossOrigin = 'Anonymous'; myImage3.onload = function(){ context.drawImage(myImage3 , 0 , 0 , 180 , 180); var base64 = canvas.toDataURL("image/png"); //"image/png" 這里注意一下 var img = document.getElementById('myCanvas'); // document.getElementById('avatar').src = base64; img.setAttribute('src' , base64); }; } }
四、長按保存功能
五、解決圖片異步嵌套問題.
測試成功：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>創意塗鴉</title> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"> <meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no"> </head> <body> <div class="main-bg" ontouchmove="return false;"> <!-- html中添加 --> <canvas id="myCanvas" width="200" height="100" style="display: none;"></canvas> <!--顯示成圖片，方便保存--> <div class="down-img"><img src="images/photo-img.jpg" alt="" class="downImg"></div> </div> <script src="js/jquery.min.js"></script> <script> function drawAndShareImage(img1, img2, img3){ var canvas=document.getElementById("myCanvas"); //var canvas = document.createElement("myCanvas"); canvas.width = 700; canvas.height = 700; var context = canvas.getContext("2d"); context.rect(0 , 0 , canvas.width , canvas.height); context.fillStyle = "#fff"; context.fill(); var myImage = new Image(); myImage.src = img1; //背景圖片 你自己本地的圖片或者在線圖片 myImage.crossOrigin = 'Anonymous'; myImage.onload = function(){ context.drawImage(myImage , 0 , 0 , 500 , 500); context.font = "60px Courier New"; context.fillText("我是文字",500,500); var myImage2 = new Image(); myImage2.src = img2; //你自己本地的圖片或者在線圖片 myImage2.crossOrigin = 'Anonymous'; myImage2.onload = function(){ context.drawImage(myImage2 , 175 , 175 , 225 , 225); var base64 = canvas.toDataURL("image/png"); //"image/png" 這里注意一下 var img = document.getElementById('myCanvas'); // document.getElementById('avatar').src = base64; img.setAttribute('src' , base64); } var myImage3 = new Image(); myImage3.src = img3; //你自己本地的圖片或者在線圖片 myImage3.crossOrigin = 'Anonymous'; myImage3.onload = function(){ context.drawImage(myImage3 , 50 , 50 , 180 , 180); var base64 = canvas.toDataURL("image/png"); //"image/png" 這里注意一下 var img = document.getElementById('myCanvas'); // document.getElementById('avatar').src = base64; img.setAttribute('src' , base64); console.log(base64) imgSrc = base64; $(".downImg").attr("src",imgSrc); }; } } drawAndShareImage("images/photo-img.jpg","images/brush-3.png","images/caomei.png"); </script> </body> </html>
原文：https://blog.csdn.net/qq_16946803/article/details/108450923