運用canvas将兩張圖檔img1,img2畫在一起，生成一張新的圖檔img3，然後實作點選下載下傳圖檔img3
代碼如下：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="1.png" id="img1" style="display: block" width="240" height="240"/>
<img src="2.png" id="img2" style="display: block" width="500" height="750"/>
<img id="img3" />
<button onclick="draw()" id="btn">點選下載下傳</button>
<script>
function draw() {
var img1 = document.getElementById("img1"),
img2 = document.getElementById("img2"),
img3 = document.getElementById("img3");
img1.width=240;
img1.height=240;
img2.width=500;
img2.height=750;
var canvas = document.createElement("canvas"),
context = canvas.getContext("2d");
canvas.width = img2.width;
canvas.height = img2.height;
canvas.style.letterSpacing = '10px';
// 将 img2 加入畫布
context.drawImage(img2,0,0,img2.width,img2.height);
// 将 img1 加入畫布
context.drawImage(img1,130,120,img1.width,img1.height);
context.fillStyle = '#333'; // 文字填充顔色
context.font = 'bold 45px Baoli SC';
var name_text = '濟 南 興 國 寺';
var name_width = context.measureText(name_text).width;
var x = (canvas.width-name_width)/2;
context.fillText(name_text,x,450);
console.log(x)
context.fillStyle = '#333'; // 文字填充顔色
context.font = '25px Baoli SC';
var desc_1 = '功德無量';
var desc_2 = '随緣樂助';
context.fillText(desc_1,x,500);
var desc_width_2 = context.measureText(desc_2).width;
context.fillText(desc_2,canvas.width-x-desc_width_2,500);
console.log(context.measureText(desc_width_2));
context.stroke();
// 将畫布内容導出
var src = canvas.toDataURL();
img3.src = src;
console.log(img3);
const a = document.createElement("a");
a.href = src;
a.download = '自定義檔案名.png';
a.click();
}
</script>
</body>
</html>
![基于vue,js的簡單pc 音樂播放器一.簡介二.項目知識點[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)