1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 </head> 8 9 <body> 10 <img src="img/bg.png" id="img1" style="display: block" width="750" height="1026" /> 11 <img src="img/missing-face.png" id="img2" style="display: block" width="100" height="100" /> 12 <img id="img3" /> 13 <button onclick="draw()" id="btn">点击下载</button> 14 <script> 15 function draw() { 16 var img1 = document.getElementById("img1"), 17 img2 = document.getElementById("img2"), 18 img3 = document.getElementById("img3"); 19 img1.width = 750; 20 img1.height = 1026; 21 img2.width = 100; 22 img2.height = 100; 23 var canvas = document.createElement(" Canvas " ), 24 context = canvas.getContext ( " 2D " ); 25 canvas.width = img1.width; // draw width 26 is canvas.height = img1.height; // draw a height 27 // canvas.style. letterSpacing = '10px'; // fillet 28 // the img1 added canvas 29 / * * 30 * context.drawImage (Image, X, Y, W, H) 31 is * Image: Image Object var img = new Image () ; img.src = "url (...) ";32 * X: X coordinate of the image drawing 33 is * y: the y coordinate of the image drawing 34 is * W: width of the image drawing 35 * H: height of the image drawing 36 * / 37 [ context.drawImage (IMG1, 0 , 0 , IMG1. width, img1.height); 38 is // the img2 added canvas 39 context.drawImage (img2, 130. , 800 , img2.width, img2.height); 40 // text fill color 41 is context.fillStyle = ' # 333 ' ; 42 // text font 43 is context.font = ' Bold 45px Baoli SC ' ; 44 is // set the text 45 var name_text = ' Jinan Kokokuji ' ; 46 // Get the text font width calculating the length (PX) 47 var name_width = context.measureText (name_text) .width; 48 // half the text width acquired removed after 49 var X = (canvas.width - name_width) / 2 ; 50 / * * 51 is * context.font: sets the font style 52 is * context.textAlign: horizontal alignment 53 is * context.textBaseline: vertical alignment 54 is * context.measureText (text): calculated Font length (PX) 55 * / 56 is context.fillText (name_text, X, 450 ); 57 is context .fillStyle = ' # 333 ' ; // text fill color 58 context.font = ' 25px Baoli SC ' ; 59 var desc_1 = ' meritorious ' ; 60 var desc_2= ' Going co music ' ; 61 is / * * 62 is * text: the text to draw 63 is * X: X coordinate of the starting point of the text axis 64 * Y: Y coordinate of the starting point of the text axis 65 * / 66 context.fillText (desc_1, X , 500 ); 67 var desc_width_2 = context.measureText (desc_2) .width; 68 context.fillText (desc_2, canvas.width - X - desc_width_2, 500 ); 69 // finish drawing 70 context.stroke (); 71 // canvas deriving 72 var the src = canvas.toDataURL (); 73 is img3.src = the src; 74 const A = document.createElement ( " A " ); 75 a.href = the src; 76 a.download = ' custom file name .png ' ; 77 a.click (); 78 } 79 </ Script > 80 </ body > 81 82 </html>