html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>用js两张图片合并成一张图片 | 下载功能</title>
</head>
<body>
<img id="avatar" />
<button id="btn">下载图片</button>
<script src="./js-canvas.js"></script>
</body>
</html>
js
window.base64 = null;
let imgArr = [
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2F2021%2Fedpic%2Fc4%2F9f%2F09%2Fc49f090757360f843141fe2bab2cfc8f_1.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647758998&t=a682086df49953b7fce64d1991b79e16",
"https://lf6-creative.dailygn.com/obj/tmg-gameres-static/build-template-assets/314fff7c7000ab4ef0c11187623697f0/comeon_avatar_frame.png",
];
function drawAndShareImage(img1, img2) {
let canvas = document.createElement("canvas");
let width = 700;
let height = 700;
canvas.width = width;
canvas.height = height;
let context = canvas.getContext("2d");
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = "#fff";
context.fill();
let myImage = new Image();
myImage.src = img1;
myImage.crossOrigin = "Anonymous";
myImage.onload = function () {
context.drawImage(myImage, 90, 90, 520, 520);
let myImage2 = new Image();
myImage2.src = img2;
myImage2.crossOrigin = "Anonymous";
myImage2.onload = function () {
context.drawImage(myImage2, 0, 0, 700, 700);
let base64 = canvas.toDataURL("image/png");
window.base64 = base64;
let img = document.getElementById("avatar");
img.setAttribute("src", window.base64);
};
};
}
function downloadIamge(imgsrc, name) {
let image = new Image();
image.setAttribute("crossOrigin", "anonymous");
image.onload = function () {
let canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
let context = canvas.getContext("2d");
context.drawImage(image, 0, 0, image.width, image.height);
let url = canvas.toDataURL("image/png");
let a = document.createElement("a");
let event = new MouseEvent("click");
a.download = name || "photo";
a.href = url;
a.dispatchEvent(event);
};
image.src = imgsrc;
}
window.onload = () => {
drawAndShareImage(...imgArr);
document.getElementById("btn").onclick = () => {
downloadIamge(window.base64, "avatar");
};
};
运行效果
![用js两张图片合并成一张图片 | 下载功能](https://img-blog.csdnimg.cn/a3a478b09a784ace9225ce809cf52be8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA2ako4oGOIMyB4YOYIMyA4oGOKdu2Oi7inKc=,size_20,color_FFFFFF,t_70,g_se,x_16)