css 照片变黑与白实际效果 应用CSS将照片变换成黑

2021-01-20 12:03 jianzhan
将会早就了解,像汶川这类不尽人意的生活网站全灰在IE下是能够轻轻松松完成的(filter: gray;),但是,那时候,别的访问器是无解的。但是,时期发展趋势,现如今,CSS3的逐渐推动,大家也刚开始看到“黑与白实际效果”大经营规模运用于具体的将会。
 
CSS3 greyscale 滤镜完成
以下检测编码:

拷贝编码
编码以下:

.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}

HTML编码

拷贝编码
编码以下:

<img src="mm1.jpg" />
<img src="mm1.jpg" class="gray" />

假如你手上的访问器是Chrome18+, 您能够狠狠地址击这里:CSS3 greyscale 滤镜与相片黑与白⤴
能够看到相近文章内容1刚开始展现的黑与白比照实际效果图。
别的些访问器,如FireFox很快就会跟上完成。自然,要完成(比如说)FireFox 4访问器上相片变黑与白的实际效果,也是能够的。可使用SVG的灰度值滤镜实际效果。
SVG滤镜完成
大家新建1个空白文字文档,例如说:gray.txt. 复制进去以下的XML编码:

拷贝编码
编码以下:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</svg>

随后,改动后缀.txt → .svg. 随后便可以启用了~~

以下CSS启用编码
filter: url(gray.svg#grayscale);随后,实际效果就出来了。假如你手上的访问器是FireFox4+,您能够狠狠地址击这里:SVG滤镜完成相片黑与白demo⤴
别忘了IE访问器
IE下完成上面早已提过,便是
filter: gray;最少IE7~9全是适用的。近期较懒,IE6懒得去测,适用与否不知道。工作经验看来,应当是适用的。
我必须1个1统河山的方式
1统河山(彻底适配),假如单纯性想根据CSS,也是能够的,你所要做的便是:每天拿个鱼竿去黄浦江垂钓,年复1年,日复1日……随后,两年后,要是两年,把上面两个demo网页页面F51下,便可以了!很简易吧!
假如嫌上面的做法过度伦敦,且你也并不是1根筋,到是有个1统河山的方式,但是并不是CSS的干货,1个貌似有点知名度的Greyscale.js。
用法很简易,引入JavaScript文档,以下:
<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>随后,1句话:
grayscale(document.getElementById("thisImage"));或DOM元素集:
grayscale(document.getElementsByTagName("img"));假如你喜爱应用jQuery,还能够应用:
grayscale($("#thisImage"));很简易吧。
完成基本原理:IE访问器下是加上灰度值滤镜,这个大伙儿都懂的。别的访问器貌似应用Canvas中的getImageData方式,随后对每一个像素点开展灰度值变换~~
因而,在当代访问器下,针对该方式,照片的灰度值解决有两个局限性:
1. 速率。300*300这张1般般尺寸的照片变灰就要数秒之久;
2. 跨域。安全性性体制,没法变换跨域的照片为黑与白色。