js 将图片置灰_让网页图片变灰色的三种方法
我一直喜欢灰度图像因为我认为他们看起来更有艺术感。很多图片编辑如Photoshop很容易把你的彩色图像变成灰度。甚至有选择调整颜色深度和色调。不幸的是,这样的效果想做在网络上并不容易,因为浏览器有差异。
1、CSS Filter
使用CSS过滤器属性可能是最简单的方法把图像变成灰度。以往,IE浏览器有一个专有的CSS属性称为过滤应用自定义效果包括灰度。
现在,过滤器属性是CSS3规范的一部分,并支持在一些浏览器,Firefox、Chrome和Safari。以前,我们也提到Webkit过滤器,它不仅将图像变成灰色也可以变成褐色和模糊效果。
添加如下CSS样式可以将图像变成灰色
img {
-webkit-filter: grayscale(1);/* Webkit */
filter:gray;/* IE6-9 */
filter: grayscale(1);/* W3C */
}
支持IE6-9和Webkit浏览器(Chrome 18+, Safari 6.0+, and Opera 15+)
(注意:这段代码在Firefox上无效果。)
2、Javascript
第二种方法是通过使用JavaScript技术上应该支持所有JavaScript的浏览器,包括IE6以下
代码来自Ajax Blender.
varimgObj = document.getElementById('js-image');
functiongray(imgObj) {
varcanvas = document.createElement('canvas');
varcanvasContext = canvas.getContext('2d');
varimgW = imgObj.width;
varimgH = imgObj.height;
canvas.width = imgW;
canvas.height = imgH;
canvasContext.drawImage(imgObj, 0, 0);
varimgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
for(vary = 0; y < imgPixels.height; y++){
for(varx = 0; x < imgPixels.width; x++){
vari = (y * 4) * imgPixels.width + x * 4;
varavg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
returncanvas.toDataURL();
}
imgObj.src = gray(imgObj);
3、SVG
第三种方法来自SVG Filter.,你需要创建一个SVG文件,并将以下代码写在里面,保存命名为***.svg
然后利用过滤器的属性,我们可以通过SVG文件中的元素的ID连接SVG文件
img {
filter:url('img/gray.svg#grayscale');
}
你也可以把它放到CSS文件中,例如:
img {
filter:url('url("data:image/svg+xml;utf8,#grayscale");')
}
总结
为了能过跨浏览器支持灰度的效果,我们可以把上述方法和一起使用下面的代码片段去实现。这段代码将支持Firefox 3.5+, Opera 15+, Safari, Chrome, and IE
img {
-webkit-filter: grayscale(100%);
-webkit-filter: grayscale(1);
filter: grayscale(100%);
filter:url('../img/gray.svg#grayscale');
filter:gray;
}
我们可以利用上面的代码和JavaScript方法和只提供CSS滤波器作为后备以防JavaScript被禁用。这个想法可以很容易地Modernizr的帮助下实现的。
.no-js img {
-webkit-filter: grayscale(100%);
-webkit-filter: grayscale(1);
filter: grayscale(100%);
filter:url('../img/gray.svg#grayscale');
filter:gray;
}
OK了,你的浏览器上可以看到很炫的效果了!!
js 将图片置灰_让网页图片变灰色的三种方法相关推荐
- 让网页图片变灰色的三种方法
我一直喜欢灰度图像因为我认为他们看起来更有艺术感.很多图片编辑如Photoshop很容易把你的彩色图像变成灰度.甚至有选择调整颜色深度和色调.不幸的是,这样的效果想做在网络上并不容易,因为浏览器有差异 ...
- html页面打印+区域,实现web网页指定区域打印的三种方法
通过本教程可以实现,将印web网页指定区域的内容,本教程将提供三种方法实现. 方法一:打印网页指定区域 HTML 在需要打印的内容 // 页面上的内容大小调整可以css调整或容器包容 打印容器内的内容 ...
- python调用matlab函数_从 Python 调用 MATLAB 函数的三种方法
0. 实验环境Ubuntu 16.04 Matlab R2015b 1. 借助于 mlab 库 安装方法非常简单,只需一行命令 sudo pip install mlab 即可. import num ...
- python读写csv文件方法总结_使用python读写CSV文件的三种方法
Python读写csv文件 觉得有用的话,欢迎一起讨论相互学习~Follow Me 前言 逗号分隔值(Comma-Separated Values,CSV,有时也称为字符分隔值,因为分隔字符也可以不是 ...
- js 将图片置灰_艾叶灰千万别扔——艾叶灰的神奇功效
请 点 上面"经络技巧"免费关注每晚9点准时免费更新 点击下面图片阅读↓↓↓ -- 以下是正文 -- 艾灰的妙用 1.宝宝经常会有红屁股,做妈妈的当然心疼,用了不少膏啊霜啊 ...
- html 整体变为灰色,网页图片变灰色的三种实现办法_html/css_WEB-ITnose
1.CSS Filter 使用CSS过滤器属性可能是最简单的方法把图像变成灰度.以往,IE浏览器有一个专有的CSS属性称为过滤应用自定义效果包括灰度. 现在,过滤器属性是CSS3规范的一部分,并支持在 ...
- js 中编码(encode)和解码(decode)的三种方法(传递是特殊符号丢失问题,如‘+’)
转自:https://www.cnblogs.com/luckyuns/p/6396701.html js对文字进行编码涉及3个函数:escape,encodeURI,encodeURICompone ...
- js 中编码(encode)和解码(decode)的三种方法
js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent 下 ...
- JavaScript程序基础(一)网页中引入Javascript的三种方法
JavaScript是一种基于对象的脚本编程语言,具有动态.跨平台.基于对象和安全等特性.它不需要经过编译,而是直接嵌入在HTML页面中运行,可把单纯的HTML页面转变成支持用户交互和事件响应的动态页 ...
最新文章
- 转帖 javascript事件监听
- 使用spark ml pipeline进行机器学习
- QT学习笔记(五):Qt5的8种标准对话框示例
- OpenDayLight Helium实验一 OpenDaylight的C/S模式实验
- window环境配置虚拟主机
- 图解集合6:LinkedHashMap
- ArcGIS 视域分析
- python注释程序_Python程序里的注释和#号
- 快速使用CSS技术手册
- 计算机基础制作幻灯片讲解,计算机应用基础_幻灯片制作.ppt
- 基于jsp+mysql+java+ssm实验室设备管理系统——计算机毕业设计
- WebScoket 实例 简单的网页聊天室
- HLG 火影忍者之~静音
- 雷神众测开启团队竞赛模式
- icp相关数学,向量模的平方转换成矩阵相乘
- Python能做什么?
- 问题 J: 老肖数等式
- 使用python3爬去360图片
- 基于Delphi的BHO开发基础
- 安利10个让你爽到爆的IDEA必备插件
热门文章
- WebRtc的下载(未完,当前只下载了部分)
- java 跳出递归_java中途强制跳出递归
- 【媒体聚焦】“我们为什么要为景安点赞”——记景安网络十四年峥嵘岁月
- linux发行版本号列举,查看Linux发行版的名称及其版本号
- matlab 死区,matlab中怎么产生死区
- 5.3.1 Unique Binary Sear Trees
- 项目使用jdk17人傻了
- 《Java平台体系》——第二章 JVM——实战:用JBE修改Java字节码
- Ubuntu Desktop - Disks
- spider_review-爬虫复习1.0