Products
GG网络技术分享 2025-03-18 16:14 0
平时使用的图片大多数都属于位图（png、jpg...），位图由一个个像素点构成的，每个像素都具有特定的位置和颜色值：
理论上，位图的每个像素对应在屏幕上使用一个物理像素来渲染，才能达到最佳的显示效果。
而在dpr > 1的屏幕上，位图的一个像素可能由多个物理像素来渲染，然而这些物理像素点并不能被准确的分配上对应位图像素的颜色，只能取近似值，所以相同的图片在dpr > 1的屏幕上就会模糊:
为了保证图片质量，我们应该尽可能让一个屏幕像素来渲染一个图片像素，所以，针对不同DPR的屏幕，我们需要展示不同分辨率的图片。
如：在dpr=2的屏幕上展示两倍图(@2x)，在dpr=3的屏幕上展示三倍图(@3x)。
使用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：
.avatar {
background-image: -webkit-image-set( \"conardLi_1x.png\" 1x, \"conardLi_2x.png\" 2x );
}
只适用于背景图
使用img标签的srcset属性，浏览器会自动根据像素密度匹配最佳显示图片：
<img src=\"conardLi_1x.png\" srcset=\" conardLi_2x.png 2x, conardLi_3x.png 3x\">
使用window.devicePixelRatio获取设备像素比，遍历所有图片，替换图片地址：
const dpr = window.devicePixelRatio;
const images = document.querySelectorAll(\'img\');
images.forEach((img)=>{
img.src.replace(\".\", `@${dpr}x.`);
})
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实现点击上传图片，同时设该图片为模糊背景，供大家参考，具体内容如下
效果展示：
源码展示：
| <!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> |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
Demand feedback
