美文网首页前端杂货随记我爱编程
image-rendering 像素化图像像素(实验中)

image-rendering 像素化图像像素(实验中)

作者: 程序蜗牛 | 来源:发表于2018-04-10 07:11 被阅读13次

image-rendering 提供一个提示,关于算法应使用缩放图像浏览器。

该属性适用于元素本身,以及元素的其他属性中提供的任何图像。它对未缩放的图像没有影响。例如,如果图像的自然尺寸是100×100像素,但页面作者将其尺寸指定为200×200px(或50×50px),则图像将使用指定算法放大(或缩小)到新尺寸。由于用户交互(缩放),缩放也可能适用。

语法

auto | crisp-edges | pixelated

/* Keyword values */
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

/* Global values */
image-rendering: inherit;
image-rendering: initial;
image-rendering: unset;

auto默认值,应使用最大化图像外观的算法来缩放图像。特别地,“平滑”颜色的缩放算法是可接受的,例如双线性插值。这适用于照片等图像。从版本1.9(Firefox 3.0)开始,Gecko使用双线性重采样(高质量)。

crisp-edges必须使用保留图像中的对比度和边缘的算法来缩放图像,并且不会在处理中使图像变得光滑或模糊。这是用于图像,如像素艺术。

pixelated当向上缩放图像时,必须使用“最近邻居”或类似的算法,以便图像看起来由大像素组成。缩小时,这与“自动”相同。

optimizeQualityoptimizeSpeed存在于早期草案(并从其SVG对应未来)定义为同义词的auto值。

实例DEMO-1

DEMO点击查看地址

.image-cons-1 img:nth-child(3){
    width: 350px;
  }
  .image-cons-1 ul{
    maging: 0;padding: 0;
    overflow: hidden;
  }
  .image-cons-1 ul li{
    float: left;
    list-style: none;
    padding: 0 10px;
  }
  .image-cons-1 ul li input{
    vertical-align: middle;
  }
<div style="padding:0 30px 30px 30px;">
    <h3>选择查看对比效果</h3>
    <div class="image-cons-1">
      <img src="./assets/images/pixel-art-small.png" alt="">
      <ul>
        <li>
          <input type = "radio" name = "imageRender" id = "auto" value = "auto" checked = "checked" @click="changeTab" />
          <label for = "auto">auto</label>
        </li>
        <li>
          <input type = "radio" name = "imageRender" id = "renderPixelated" value = "pixelated" @click="changeTab" />
          <label for = "renderPixelated">pixelated</label>
        </li>
        <li><input type = "radio" name = "imageRender" id = "crispEdges" value = "crisp-edges" @click="changeTab" />
          <label for = "crispEdges">crisp edges</label></li>
      </ul>
      <img src="./assets/images/pixel-art-small.png" :style = "{'image-rendering': valueStr}" alt="">
    </div>
  </div>

效果

image.png

实例DEMO-2

DEMO点击查看地址

body{
    --size: 50px;
  }
  .image-cons {
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px;
    background: rgba(180,160,120,.1);
    position: relative;
  }

  input[type="range"] {
    position: absolute;
    top: 30px;
    left: 10px;
    width: calc(100% - 20px);
    background: #ccc;
    -webkit-appearance: none; /*去除默认样式*/
    height: 10px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
  }

  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;/*去除默认样式*/
    cursor: default;
    top: 0;
    height: 20px;
    width: 20px;
    transform: translateY(0px);
    background: #fff;
    border-radius: 15px;
    border: 5px solid #006eb3;
  }

  img {
    width: var(--size);
    margin: 10px;
  }

  img:nth-child(2) {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
  }
<div style="padding:0 30px 30px 30px;">
    <h3>滑动观察放大之后的对比效果</h3>
    <div class="image-cons">
      <img src="./assets/images/pixel-girl-head.png" alt="">
      <img src="./assets/images/pixel-girl-head.png" alt="">
      <input type="range" min="20" max="500" value="50" v-on:input="changeInput">
    </div>
  </div>
image.png

兼容性:

浏览器支持

image.png

参考资料:

原文blog

image-rendering

MDN: image-rendering

css-tricks:image-rendering

相关文章

  • image-rendering 像素化图像像素(实验中)

    image-rendering 提供一个提示,关于算法应使用缩放图像浏览器。 该属性适用于元素本身,以及元素的其他...

  • Pixel Coordinate System 坐标系

    像素坐标系统是指图像中的单个像素,支持亚像素精度。坐标系原点是这样的,0.0,0.0是图像中左上像素的左上角和列,...

  • OpenGL 基础纹理

    原始图像数据 像素包装 图像存储空间 = 图像的高度 * 图像宽度 * 每个像素的字节数。 OpenGL中的纹理文...

  • OpenGL学习之路(6.0) 基础纹理

    原始图像数据 .像素包装图像存储空间 = 图像的⾼高度 * 图像宽度 * 每个像素的字节数 认识函数 像素存储方式...

  • equalizeHist(直方图均衡化,提升对比度)

    概念 直方图是图像中像素强度分布的图形表达方式,它统计了每一个强度值所具有的像素个数,而直方图均衡化就是拉伸像素的...

  • 设备像素、设备独立像素、CSS像素

    像素 是指在由一个数字序列表示的图像中的一个最小单位,称为像素。 设备像素 设备像素又称物理像素(physical...

  • opencv2(2017.5.5)

    1.图像的腐蚀和膨胀 前提:输入的是二值图像腐蚀:用该像素周围像素集合中最小像素替换当前像素;膨胀:用该像素周围像...

  • ML之图像数字化2

    图像数字化器:必须能够将一幅图像分解为像素并确定每个像素的位置,测量每个像素的灰度级别,将所测量的连续亮度信息量化...

  • PhotoShop图像尺寸和分辨率提示技巧

    使用数码相机扫描图像或拍照后,图像将被数字化-由数十万个像素组成。像素无非就是很小的彩色正方形(一英寸有72个像素...

  • 2.1 Core - 图像基本操作

    目标 访问像素值并修改它们 访问图像属性 设置图像区域(ROI) 分割和合并图像 访问和修改像素值 您可以通过像素...

网友评论

    本文标题:image-rendering 像素化图像像素(实验中)

    本文链接:https://www.haomeiwen.com/subject/lnnwhftx.html