说明

  • js将两张图片合并为一张，比如一键生成海报图（将二维码合并到海报图上）

操作

  • html代码 
    <!DOCTYPE html>
<html>
<head>
	<title>js合并图片</title>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script type="text/javascript" src="index.js"></script>
</body>
</html>
  • js代码 
    // 加载图片
var img1 = new Image();
img1.src = '1.jpg';
var img2 = new Image();
img2.src = '2.jpg';

img1.onload = function() {
	//获取canvas元素
	var canvas = document.getElementById("canvas");
	canvas.width = img1.width;
	canvas.height = img1.height;

	var ctx = canvas.getContext("2d");
	ctx.rect(0, 0, canvas.width, canvas.height);
	ctx.fillStyle = "#F7F8FA";
	ctx.fill();

	//将图片1绘制到canvas上
	ctx.drawImage(img1, 0, 0);

	img2.onload = function() {
		//将图片2绘制到canvas上
		ctx.drawImage(img2, canvas.width - 150, canvas.height - 150, 100, 100);
	};
};
关于作者 · AdminI am Yasin, let's talk about these first!

文章评论

还没有评论，欢迎留下第一条回复。