前端基础：必须要知道的移动端适配（9）——图片模糊问题(js实现点击上传图片并设为模糊背景)
文章目录
前端基础：必须要知道的移动端适配（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实现点击上传图片，同时设该图片为模糊背景，供大家参考，具体内容如下
效果展示：
源码展示：
| <!doctype html>
<html> <head> <meta charset=\"utf-8\"> <title>js实现点击上传图片，同时设该图片为模糊背景</title> <script src=\"http://libs.baidu.com/jquery/1.11.3/jquery.min.js\"></script> <style> input { display:block; margin:0 auto; opacity:0; position:absolute; width:100%; height:100%; top:0; z-index:10; cursor:pointer; } p { font-size:14px; line-height:100px; position:absolute; top:0; left:8px; z-index:5; margin:0; } form { margin:0; } .box { width:100px; height:100px; border:1px solid #f60; border-radius:50px; margin:0 auto; overflow:hidden; position:relative; text-align:center; } .big-box { width:100%; height:250px; position:relative; margin-top:10px; overflow:hidden; padding-top:150px; border:1px solid #000000; } .bg-img { position:absolute; width:100%; -webkit-filter:blur(50px); z-index:-1; top:0; } img { width:100%; } </style> </head> <body> <div class=\"big-box\"> <img id=\"imgPre\" src=\"\" class=\"bg-img\"> <form action=\"\"> <div class=\"box\"> <img id=\"imgPre_1\" src=\"\"> <p>点击上传图片</p> <input type=\"file\" name=\"imgOne\" id=\"imgOne\" onchange=\"preImg(this.id,\'imgPre\');\"> </div> </form> </div> <script> /** * 从 file 域获取 本地图片 url */ function getFileUrl(sourceId) { var url; if (navigator.userAgent.indexOf(\"MSIE\") >= 1) { // IE url = document.getElementById(sourceId).value; } else if (navigator.userAgent.indexOf(\"Firefox\") > 0) { // Firefox url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } else if (navigator.userAgent.indexOf(\"Chrome\") > 0) { // Chrome url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } return url; }; /** * 将本地图片 显示到浏览器上 */ function preImg(sourceId, targetId) { var url = getFileUrl(sourceId); var imgPre = document.getElementById(targetId); imgPre.src = url; imgPre_1.src = url; }; $(function() { $(\'input\').click(function() { $(\'p\').hide(); }); }); </script> <pre style=\"color:red\"> </pre> </body> </html> |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » 前端基础：必须要知道的移动端适配（9）——图片模糊问题(js实现点击上传图片并设为模糊背景)
