ps大图缩小后变模糊如何办

什么是图片模糊？

图片模糊指的是由于图片放大或缩小的过程中，像素点被改变导致的图像失真现象。

原因及解决方法

PS是一款强大的图片处理工具，但是缩小图片后导致的失真问题 （缩小图片时图片大小变小，但是图片中的像素点数量不会减少，导致像素点间的距离变大，从而出现失真问题） ，需要通过技巧和工具来规避和解决。

1.锐化图像：

可以通过锐化图像来使得图片的边缘更加清晰，从而减少失真。常用的锐化方式有高斯锐化、拉普拉斯锐化等等。这里以高斯模糊的方式为例：

		<img src="example.jpg">
		<script>
			var img=document.querySelector('img');
			var canvas=document.createElement('canvas');
			var ctx=canvas.getContext('2d');
			canvas.width=img.width;
			canvas.height=img.height;
			ctx.drawImage(img, 0, 0);
			ctx.filter='blur(10px)'; //高斯模糊
			ctx.drawImage(canvas, 0, 0);
		</script>
	

2.缩小图像前处理：

在缩小图片之前，可以对原图进行处理，比如添加锐化、去噪等滤镜，减少了原图像素的个数，这样可以起到预处理的效果，减少图像失真。这里以Canvas的方式为例：

		<img src="example.jpg">
		<script>
			var img=document.querySelector('img');
			var canvas=document.createElement('canvas');
			var ctx=canvas.getContext('2d');
			canvas.width=img.width;
			canvas.height=img.height;
			ctx.drawImage(img, 0, 0);
			Caman(canvas, function () {
			    this.sharpen(100);
			    this.noise(10);
			    this.resize({width: 200, height: 200});
			    this.render(function() {
			      img.src=canvas.toDataURL();
			    });
			   });
		</script>
	

3.使用SVG：

可以使用SVG来代替图片作为背景，这样缩放时不会失真，因为SVG是矢量图形。常用的SVG编辑器有Adobe Illustrator、Sketch等。这里以使用Tileset的方式为例：

		<svg viewBox="0 0 1000 1000">
			<defs>
				<pattern id="tileset" patternUnits="userSpaceOnUse"
				width="100" height="100">
					<rect stroke="black" stroke-width="1" width="50"
					height="50" fill="#f1f1f1"/>
					<rect stroke="black" stroke-width="1" x="50"
					y="50" width="50" height="50" fill="#ffffff"/>
				</pattern>
			</defs>
			<rect fill="url(#tileset)" x="0" y="0" width="100%" height="100%"/>
		</svg>
	

总结

缩小图片不失真是一个常见的程序需求，上述的方法只是其中一部分，实际应用过程中还需要结合具体情况来进行综合处理。需要明确的是，无论采用何种处理方式，必须严格遵守相应的规范和约定。只有如此，才能确保缩小后的图片质量达到预期。