canvas加载多张照片

m0_68937827

于 2024-04-22 10:26:52 发布

阅读量285

点赞数 2

文章标签：前端 canva可画

本文链接：https://blog.csdn.net/m0_68937827/article/details/138060094

版权

文章讲述了在JavaScript中使用Image对象异步加载图片，并通过canvas进行绘制的过程。讨论了错误代码示例，其中涉及到并发加载图片可能导致的问题，以及如何优化大量图片的加载方式，如使用循环加载。

摘要由CSDN通过智能技术生成

加载一张照片

let image = new Image()
image.src = './image.png'
image.onload = () => {
    // 图片加载完才会进入此方法
    // 绘制画板
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    // 绘制图像，可以设置绘制图像的宽高和位置信息
    context.drawImage(image, 0, 0);
};

加载两张图片：

let image1 = new Image()
image1.src = './image1.png'
image1.onload = () => {
    // 图片加载完才会进入此方法
    let image2 = new Image()
	image2.src = './image2.png'
	image2.onload = () => {
		// 将两张图片都加载完才去绘制图像，否则会出现绘制图像失败的情况
    	const canvas = document.createElement('canvas');
    	const context = canvas.getContext('2d');
    	// 绘制图像，可以设置绘制图像的宽高和位置信息
    	context.drawImage(image1, 0, 0);
    	context.drawImage(image2, 0, 0);
	}
};

错误代码：

let image1 = new Image()
image1.src = './image1.png'
image1.onload = () => {
    // 图片加载完才会进入此方法
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    // 绘制图像，可以设置绘制图像的宽高和位置信息
    context.drawImage(image1, 0, 0);
    let image2 = new Image()
	image2.src = './image2.png'
	image2.onload = () => {
    	context.drawImage(image2, 0, 0);
	}
};