前端基础：必须要知道的移动端适配（9）——图片模糊问题

产生原因

平时使用的图片大多数都属于位图（png、jpg...），位图由一个个像素点构成的，每个像素都具有特定的位置和颜色值：

理论上，位图的每个像素对应在屏幕上使用一个物理像素来渲染，才能达到最佳的显示效果。

而在dpr > 1的屏幕上，位图的一个像素可能由多个物理像素来渲染，然而这些物理像素点并不能被准确的分配上对应位图像素的颜色，只能取近似值，所以相同的图片在dpr > 1的屏幕上就会模糊:

解决方案

为了保证图片质量，我们应该尽可能让一个屏幕像素来渲染一个图片像素，所以，针对不同DPR的屏幕，我们需要展示不同分辨率的图片。

如：在dpr=2的屏幕上展示两倍图(@2x)，在dpr=3的屏幕上展示三倍图(@3x)。

media查询

使用media查询判断不同的设备像素比来显示不同精度的图片：

.avatar{

background-image: url(conardLi_1x.png);

}

@media only screen and (-webkit-min-device-pixel-ratio:2){

.avatar{

background-image: url(conardLi_2x.png);

}

}

@media only screen and (-webkit-min-device-pixel-ratio:3){

.avatar{

background-image: url(conardLi_3x.png);

}

}

只适用于背景图

image-set

使用image-set：

.avatar {

background-image: -webkit-image-set( \"conardLi_1x.png\" 1x, \"conardLi_2x.png\" 2x );

}

只适用于背景图

srcset

使用img标签的srcset属性，浏览器会自动根据像素密度匹配最佳显示图片：

<img src=\"conardLi_1x.png\" srcset=\" conardLi_2x.png 2x, conardLi_3x.png 3x\">

JavaScript拼接图片url

使用window.devicePixelRatio获取设备像素比，遍历所有图片，替换图片地址：

const dpr = window.devicePixelRatio;

const images = document.querySelectorAll(\'img\');

images.forEach((img)=>{

img.src.replace(\".\", `@${dpr}x.`);

})

使用svg

SVG的全称是可缩放矢量图（Scalable Vector Graphics）。不同于位图的基于像素，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。

除了我们手动在代码中绘制svg，我们还可以像使用位图一样使用svg图片：

<img src=\"conardLi.svg\">

<img src=\"data:image/svg+xml;base64,[data]\">

.avatar {

background: url(conardLi.svg);

}

js实现点击上传图片并设为模糊背景

本文实例为大家分享了js实现点击上传图片，同时设该图片为模糊背景，供大家参考，具体内容如下

效果展示：