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

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当向上缩放图像时，必须使用“最近邻居”或类似的算法，以便图像看起来由大像素组成。缩小时，这与“自动”相同。

optimizeQuality和optimizeSpeed存在于早期草案（并从其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>

效果

实例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>

兼容性：

浏览器支持

参考资料：

原文blog

image-rendering

MDN: image-rendering

css-tricks：image-rendering

image-rendering 像素化图像像素(实验中)相关推荐

聚类图像像素 Clustering Pixels Using K-Means
在K-Means Using Python中,给出了一个用K-Means聚类的tutorial,这次将K-Means用在具体图像像素聚类中,需要说明的是除了在很简单的图像上,单纯在像素值上应用K-Me ...
Opencv--IplImage访问图像像素的值
opencv2.1版本之前使用IplImage*数据结构来表示图像,2.1之后的版本使用图像容器Mat来存储.IplImage结构体如下所示. 1 typedef struct _IplImage 2 ...
【数字图像处理】图像直方图均衡化、空域滤波（均值滤波、中值滤波）、图像锐化（Laplace算子）、图像傅里叶变换实验
图像直方图均衡化.空域滤波.图像锐化.图像傅里叶变换一.图像直方图均衡化二.图像空域滤波 1.均值滤波(滤波次数n→3) 2.中值滤波(滤波次数n→3) 3.图像锐化(Laplace算子) 三.图 ...
C#中的bitmap类和图像像素值获取方法
private void button1_Click_1(object sender, EventArgs e) { // 画直线 //Bitmap bitM ...
利用计算机模拟函数图像,计算机模拟实验在教学中的应用论文(2)
计算机模拟实验在教学中的应用论文篇二 <计算机教学软件在物理模拟实验中的应用> 摘要:本论文通过叙述用计算机教学软件制作物理模拟实验软件的过程,展示了利用几何画板制作物理模拟实验的一些综合 ...
dataset中获取图像的名字_GDAL与OpenCV的图像像素读取格式互相转换
前言任务原因,遇到了一个需要GDAL图像像素格式与OpenCV相互转换的问题,解决之后顺便记录一下. 正文 OpenCV(Open Source Computer Vision Library)是一 ...
opencv中求图像像素值中位数
话不多说,直接上源码: int GetMidValue(Mat& input) {int rows = input.rows;int cols = input.cols;float histo ...
深度学习在遥感图像目标检测中的应用综述
深度学习在遥感图像目标检测中的应用综述 1 人工智能发展 1.1 发展历程 1.2 深度学习的应用 2 深度学习 2.1 机器学习概述 2.2 神经网络模型 2.3 深度学习 2.4 深度学习主要模型 ...
Opencv3编程入门学习笔记（三）之访问图像像素的三种方法
访问图像像素的三种方法:指针访问,迭代器访问,动态地址访问.访问最快的为指针访问,以下算法在几毫秒,但指针访问容易造成内存泄漏:其次为迭代器访问:最后为动态地址访问. 以下程序是根据<OpenC ...

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

语法

实例DEMO-1

实例DEMO-2

浏览器支持

image-rendering 像素化图像像素(实验中)相关推荐

最新文章

热门文章