How to make web sites and pictures black and white
May the winter dissipate and there will be no more national tragedy. ——2020.04.04
Contents of this article
Website element processing, CSS: filter
Without being too pretentious, let’s start with the results and CSS properties:
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url('url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%
200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");');
filter: gray;
}
1. filter
filterCSS properties apply graphic effects such as blur or color shift to elements. Filters are commonly used to adjust the rendering of images, backgrounds and borders. Students who are familiar with PS will like this attribute very much.
IE : The filter filter was previously supported by IE. I vaguely remember the IE6/7 hack code that used filter to write opacity.
For IE6 to 9, elements can be blackened or blackened directly through filter:
html {
filter: gray;
}
However, IE10 began to abandon the filter filter, so the new version of IE has not been able to use filter: grayscale() to achieve the black and white effect of the website.
w3c : CSS3 provides a standard CSS Filter solution based on IE's private filters.
2.filter: grayscale(percent)
CSS3's Filter scheme converts images into grayscale images. The value defines the scale of the conversion. If the value is 100%, the image will be completely converted to grayscale, and if the value is 0%, the image will remain unchanged. Values between 0% and 100% are linear multipliers of the effect. If not set, the value defaults to 0.
Therefore, the black and white effect of the website can be written like this:
html {
-webkit-filter: grayscale(100%); /* webkit内核，Chrome，Safari */
-moz-filter: grayscale(100%); /* 虽然Firefox现在不支持，将来可能就支持了 */
-ms-filter: grayscale(100%); /* ie */
-o-filter: grayscale(100%); /* Opera */
filter: grayscale(100%); /* 标准写法 */
}
compatibility:
![[p-compatibility.png]](https://img-blog.csdnimg.cn/20200404211530633.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MzU3MTY1,size_16,color_FFFFFF,t_70#pic_center)
Right now
-
Mobile iOS 9+, android5+;
-
Supports PC Edge, Chrome, Safari, Opera.
Before effect:
![[p-1_original.png]](https://img-blog.csdnimg.cn/20200404210502562.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MzU3MTY1,size_16,color_FFFFFF,t_70#pic_center)
after effect
![[p-1_gray.png]](https://img-blog.csdnimg.cn/20200404210530606.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MzU3MTY1,size_16,color_FFFFFF,t_70#pic_center)
SVG effects for HTML
For incompatible IE and Firefox, if we want to achieve black and white effects, we can use SVG effects for HTML, that is, use svg in CSS styles to apply image effects to HTML content.
Note: SVG introduced in external files must have the same origin as the original file
Use inline SVG
To apply SVG effects in a CSS style, you first need to create a CSS style that references SVG.
gray.svg
Define gray filter, gray.svg:
<svg 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>
Referenced in html and defined in css
html {
filter:url('gray.svg#grayscale'); /*灰度滤镜放在gray.svg文件的id叫做grayscale的滤镜里*/
}
Embed gray.svg
If the file is embedded in an html file, then
html {
filter: url('#grayscale');
}
Direct css reference svg
html {
filter: url('url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%
200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");')
}
compatibility:
![[p-svghtml-compatibility.png]](https://img-blog.csdnimg.cn/20200404211601907.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MzU3MTY1,size_16,color_FFFFFF,t_70#pic_center)
In this way, it can be compatible with most browsers except IE10/11.
The final compatible implementation:
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url('url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%
200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");');
filter: gray;
}
- *How to deal with IE10/11? You can learn from this website: http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-ie11/
Image processing
Front-end: canvas processing pictures
/**
* @function gray
* @param {DOMElement} imgObj
* @return {String}
*/
function gray(imgObj) {
let canvas = document.createElement('canvas'),
canvasContext = canvas.getContext('2d');
const imgW = imgObj.width,
imgH = imgObj.height;
canvas.width = imgW;
canvas.height = imgH;
canvasContext.drawImage(imgObj, 0, 0);
let imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
for (let y = 0; y < imgPixels.height; y++) {
for (let x = 0; x < imgPixels.width; x++) {
let i = (y * 4) * imgPixels.width + x * 4;
let avg = (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);
return canvas.toDataURL();
}
// use
let imgObj = document.getElementById('imgToGray'); // 要变灰的图片元素
imgObj.src = gray(imgObj);
Server side: ImageMagick and gm
For more usage instructions on ImageMagick and gm, please visit: [Notes] ImageMagick and gm
imagemagick command
Single image:
convert p-ori.jpg -colorspace Gray p-gray.jpg
Batch pictures:
convert *.jpg -colorspace Gray p-gray.jpg
If the current directory contains 6 pictures, the above command will generate p-gray-0.jpg to p-gray-5.jpg.
Nodejs-gm module
gm's colorspace method.
Single image:
const gm = require('gm').subClass({
imageMagick: true
});
gm("p-ori.png").colorspace('GRAY').write('./p-gray.png', function (err) {
if (err) console.error(err);
else console.log('success');
})
Batch pictures:
const gm = require('gm').subClass({
imageMagick: true
});
gm("*.png").colorspace('GRAY').write('./p-gray.png', function (err) {
if (err) console.error(err);
else console.log('success');
})
If the current directory contains 6 pictures, the above command will generate p-gray-0.png to p-gray-5.png.
Customized batches are implemented through traversal calls.
Related Links
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
- https://developer.mozilla.org/zh-CN/docs/Web/SVG/Applying_SVG_effects_to_HTML_content
- https://aheckmann.github.io/gm/docs.html#colorspace
- http://blog.michealwayne.cn/2020/03/07/notes/%E3%80%90%E7%AC%94%E8%AE%B0%E3%80%91ImageMagick%E5%92%8Cgm/
- http://www.graphicsmagick.org/GraphicsMagick.html#details-colorspace
- http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-ie11/