栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

缩放时禁用插值

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

缩放时禁用插值

是否可以通过编程更改画布属性或浏览器设置以在缩放元素时禁用插值?

答案可能是有一天。目前,您必须借助黑客手段来获得所需的东西。

image-rendering

CSS3的工作草案概述了一个新属性,image-rendering该属性应该可以实现我想要的功能:

图像渲染属性向用户代理提供了有关在缩放图像时哪些方面最重要保留的提示,以帮助用户代理选择适当的缩放算法。

该规范概述接受三个值:auto,crisp-edges,和pixelated。

像素化:

在按比例放大图像时,必须使用“最近邻居”或类似算法,以便图像看起来仅由非常大的像素组成。缩小时,这与自动相同。

标准?跨浏览器?
由于这只是工作草案,因此无法保证这将成为标准。目前,对浏览器的支持充其量是最多的。

Mozilla开发人员网络上有一个非常详尽的页面,专门介绍当前的技术水平,我强烈建议阅读。

Webkit开发人员最初选择暂时将其实现为-webkit-optimize-contrast,但Chromium / Chrome似乎并没有使用实现此功能的Webkit版本。

更新

Chrome 38现在支持image-rendering: pixelated!

Firefox有一个漏洞报告可以image-rendering: pixelated实施,但-moz-crisp-edges现在可以使用。

解?
因此,迄今为止,最跨平台,仅CSS的解决方案是:

canvas {  image-rendering: optimizeSpeed;    image-rendering: -moz-crisp-edges;            image-rendering: -webkit-optimize-contrast;   image-rendering: -o-crisp-edges;   image-rendering: pixelated;        -ms-interpolation-mode: nearest-neighbor;   }

遗憾的是,这还不适用于所有主要的HTML5平台(尤其是Chrome)。

当然,可以使用最近邻插值法将图像手动放大到javascript的高分辨率画布表面上,甚至可以在服务器端预先缩放图像,但是在我的情况下,这代价高昂,因此这不是一个可行的选择。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/432518.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号