<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<title>合并图片</title>
<style>
img {
border: solid 1px #ddd;
}
</style>
</head> <body> <img id="avatar" />
<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
var canvas = document.createElement("canvas");
canvas.width = 550;
canvas.height = 700;
var context = canvas.getContext("2d");
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = "#fff";
context.fill();
var img1 = new Image();
img1.src = "img/d.jpg"; //背景图片 你自己本地的图片或者在线图片
img1.crossOrigin = 'Anonymous';
img1.setAttribute("crossOrigin", 'anonymous');
var img1w = img1.width;
var img1h = img1.height;
var widths1 = 400 / img1w;
var heithes1 = 300 / img1h;
img1.onload = function() {
if (img1w > 400 || img1h > 300) {
context.drawImage(img1, 50, 30, img1w * heithes1, img1h * heithes1);
} else if (img1.width > 400) {
context.drawImage(img1, 50, 30, img1w * widths1, img1h * widths1);
} else if (img1.height > 300) {
context.drawImage(img1, 50, 30, img1w * heithes1, img1h * heithes1);
} else {
context.drawImage(img1, 50, 30, img1w, img1h);
}
var img2 = new Image();
img2.src = "img/d.jpg"; //你自己本地的图片或者在线图片
img2.crossOrigin = 'Anonymous';
img2.setAttribute("crossOrigin", 'anonymous');
img2.onload = function() {
var img2w = img2.width;
var img2h = img2.height;
var widths2 = 400 / img2w;
var heithes2 = 300 / img2h;;
if (img2w > 400 || img2h > 300) {
context.drawImage(img2, 50, 350, img2w * heithes2, img2h * heithes2);
} else if (img2.width > 400) {
context.drawImage(img2, 50, 350, img2w * widths2, img2h * widths2);
} else if (img2.height > 300) {
context.drawImage(img2, 50, 350, img2w * heithes2, img2h * heithes2);
} else {
context.drawImage(img2, 50, 350, img2w, img2h);
}
var base64 = canvas.toDataURL("image/png");
var img = document.getElementById('avatar');
// document.getElementById('avatar').src = base64;
img.setAttribute('src', base64);
}
}
</script>
</body>
</html>