代码整理-js合并图片

csdn_yasin

于 2023-10-22 08:00:00 发布

阅读量796

点赞数

分类专栏： HTML JavaScript 文章标签： javascript 前端 html 图片合并

本文链接：https://blog.youkuaiyun.com/csdn_yasin/article/details/133904191

版权

HTML 同时被 2 个专栏收录

5 篇文章

订阅专栏

JavaScript

3 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明

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