代码整理-js合并图片

最新推荐文章于 2024-07-15 16:32:01 发布

原创最新推荐文章于 2024-07-15 16:32:01 发布 · 907 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html #图片合并

HTML 同时被 2 个专栏收录

5 篇文章

订阅专栏

JavaScript

3 篇文章

订阅专栏

本文介绍了如何使用JavaScript和HTML的canvas元素将两张图片合并，包括加载图片、调整canvas大小、绘制背景和合并图片的具体步骤，展示了如何将二维码融入海报图中。

说明

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);
	};
};