canvas添加图片,避免显示空白和模糊问题

最新推荐文章于 2025-01-25 20:26:55 发布

小鹏啊～

最新推荐文章于 2025-01-25 20:26:55 发布

阅读量771

点赞数 7

文章标签：前端 canva可画 js

本文链接：https://blog.csdn.net/weixin_44287264/article/details/134596909

版权

文章介绍了如何在Canvas上填充图片时，处理图片原始尺寸与画布大小不一致的情况，通过调整画布和盒子大小，确保在不同屏幕下图片显示完整且清晰，实现2X效果。

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

canvas填充图片时，如果图片原始大小和画布大小不一样，图片像素大于画布像素时，填充图片会使用图片原尺寸,会导致在容器内图片显示不全, 避免缩小尺寸后图片模糊, 将盒子放大两倍,再通过样式控制盒子大小,实现盒子大小不变,图片大小为 2X 的效果
canvas.width ,canvas.height 控制的是画布的大小
canvas.style.width ,canvas.style.height 控制的展示画布盒子的大小

	canvasImg(domName, src) {
		var canvas = document.getElementById(domName);
		var ctx = canvas.getContext("2d");
		var img = new Image();
		img.src = src;
		img.onload = function () {
			let scale = img.width / img.height; //获取图片原始尺寸比例  后面计算会用
			let originalWith = ""; // 初始宽度
			let originalHeight = ""; //初始高度
			// 业务逻辑: 根据屏幕宽度和原始尺寸比例,定义原始宽高
			if (window.innerWidth >= 1200) {
				originalWith = 1200;
				originalHeight = 1200 / scale;
			} else {
				originalWith = window.innerWidth - 24;
				originalHeight = window.innerWidth / scale;
			}
			// 此处操作画布和盒子的大小
			canvas.width = originalWith * 2;
			canvas.height = originalHeight * 2;
			canvas.style.width = canvas.width / 2 + "px";
			canvas.style.height = canvas.height / 2 + "px";
			ctx.drawImage(img, 0, 0);
		};
	},