在HTML/CSS中将图像转换为灰度

Is there a simple way to display a color bitmap in grayscale with just HTML/CSS?

是否有一种简单的方法只用HTML/CSS以灰度显示彩色位图?

It doesn't need to be IE-compatible (and I imagine it won't be) -- if it works in FF3 and/or Sf3, that's good enough for me.

它不需要是ie兼容的(我想它不会)——如果它在FF3和/或Sf3中工作，这对我来说就足够了。

I know I can do it with both SVG and Canvas, but that seems like a lot of work right now.

我知道我可以同时使用SVG和Canvas来实现这一点，但是现在看来这是一项繁重的工作。

Is there a truly lazy person's way to do this?

是否有一个真正懒惰的人去做这件事?

26 个解决方案

#1

674

Support for CSS filters has landed in Webkit. So we now have a cross-browser solution.

Webkit支持CSS过滤器。现在我们有一个跨浏览器的解决方案。

img {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

/* Disable grayscale on hover */
img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

<img src="http://lorempixel.com/400/200/">

What about Internet Explorer 10?

那ie 10呢?

You can use a polyfill like gray.

你可以用一种类似灰色的polyfill。

#2

126

Following on from brillout.com's answer, and also Roman Nurik's answer, and relaxing somewhat the the 'no SVG' requirement, you can desaturate images in Firefox using only a single SVG file and some CSS.

根据brillout.com网站的回答，以及Roman Nurik的回答，在某种程度上放宽了“不SVG”的要求后，你可以只用一个SVG文件和一些CSS就可以在Firefox中消除图像。

Your SVG file will look like this:

您的SVG文件将如下所示:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
    <filter id="desaturate">
        <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>

Save that as resources.svg, it can be reused from now on for any image you want to change to greyscale.

节省资源。svg，可以从现在开始对任何想要更改为灰度的图像进行重用。

In your CSS you reference the filter using the Firefox specific filter property:

在您的CSS中，您使用Firefox特定过滤器属性引用过滤器:

.target {
    filter: url(resources.svg#desaturate);
}

Add the MS proprietary ones too if you feel like it, apply that class to any image you want to convert to greyscale (works in Firefox >3.5, IE8).

如果您想要将这个类应用到任何您想要转换成灰度的图像(在Firefox >3.5、IE8中工作)，也可以添加MS专有的。

edit: Here's a nice blog post which describes using the new CSS3 filter property in SalmanPK's answer in concert with the SVG approach described here. Using that approach you'd end up with something like:

编辑:这里有一篇不错的博客文章，描述了如何在SalmanPK的回答中使用新的CSS3过滤器属性，以及这里描述的SVG方法。使用这种方法，你会得到如下结果:

img.desaturate{
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */
    -webkit-filter: grayscale(100%); /* New WebKit */
    filter: url(resources.svg#desaturate); /* older Firefox */
    filter: grayscale(100%); /* Current draft standard */
}

Further browser support info here.

进一步的浏览器支持信息在这里。

#3

For Firefox you don't need to create a filter.svg file, you can use data URI scheme.

对于Firefox，您不需要创建过滤器。svg文件，可以使用数据URI方案。

Taking up the css code of the first answer gives:

使用第一个答案的css代码可以得到:

filter: 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"); /* Firefox 3.5+ */
filter: grayscale(100%); /* Current draft standard */
-webkit-filter: grayscale(100%); /* New WebKit */
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); 
-o-filter: grayscale(100%);
filter: gray; /* IE6+ */

Take care to replace "utf-8" string by your file encoding.

注意用文件编码替换“utf-8”字符串。

This method should be faster than the other because the browser will not need to do a second HTTP request.

这个方法应该比另一个更快，因为浏览器不需要执行第二个HTTP请求。

#4

Update: I made this into a full GitHub repo, including JavaScript polyfill for IE10 and IE11: https://github.com/karlhorky/gray

更新:我把它做成了一个完整的GitHub repo，包括IE10和IE11的JavaScript polyfill: https://github.com/karlhorky/gray

I originally used SalmanPK's answer, but then created the variation below to eliminate the extra HTTP request required for the SVG file. The inline SVG works in Firefox versions 10 and above, and versions lower than 10 no longer account for even 1% of the global browser market.

我最初使用了SalmanPK的答案，然后创建了下面的变体，以消除SVG文件所需的额外HTTP请求。内嵌SVG在Firefox 10或以上版本中工作，低于10的版本不再占全球浏览器市场的1%。

I have since been keeping the solution updated on this blog post, adding support for fading back to color, IE 10/11 support with SVG, and partial grayscale in the demo.

此后，我一直在这篇博文中更新这个解决方案，添加了对退色的支持，IE 10/11支持SVG，以及演示中的部分灰度。

img.grayscale {
  /* Firefox 10+, Firefox on Android */
  filter: url("data:image/svg+xml;utf8,<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>#grayscale");

  /* IE 6-9 */
  filter: gray;

  /* Chrome 19+, Safari 6+, Safari 6+ iOS */
  -webkit-filter: grayscale(100%);
}

img.grayscale.disabled {
  filter: none;
  -webkit-filter: grayscale(0%);
}

#5

If you are able to use JavaScript, then this script may be what you are looking for. It works cross browser and is working fine for me so far. You can't use it with images loaded from a different domain.

如果您能够使用JavaScript，那么这个脚本可能就是您正在寻找的。它可以跨浏览器工作，目前对我来说还不错。不能将它用于从不同域加载的图像。

http://james.padolsey.com/demos/grayscale/

#6

Just got the same problem today. I've initially used SalmanPK solution but found out that effect differs between FF and other browsers. That's because conversion matrix works on lightness only not luminosity like filters in Chrome/IE . To my surprise I've found out that alternative and simpler solution in SVG also works in FF4+ and produces better results:

只是今天遇到了同样的问题。我最初使用了SalmanPK解决方案，但是发现FF和其他浏览器的效果是不同的。这是因为转换矩阵只对亮度有效，而不是像Chrome/IE中的过滤器那样的光度。令我惊讶的是，我发现SVG中另一种更简单的解决方案也适用于FF4+，并产生更好的结果:

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="desaturate">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
</svg>

With css:

用css:

img {
    filter: url(filters.svg#desaturate); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}

One more caveat is that IE10 doesn't support "filter: gray:" in standards compliant mode anymore, so needs compatibility mode switch in headers to work:

还有一点需要注意的是，IE10不再支持“过滤器:gray:”在标准兼容模式下，所以需要在header中切换兼容性模式才能工作:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

#7

Doesn't look like it's possible (yet), even with CSS3 or proprietary -webkit- or -moz- CSS properties.

即使有CSS3或专有的-webkit-或-moz- CSS属性，看起来也不可能实现。

However, I did find this post from last June that used SVG filters on HTML. Not available in any current browser (the demo hinted at a custom WebKit build), but very impressive as a proof of concept.

然而，我确实在去年6月找到了在HTML上使用SVG过滤器的这篇文章。在任何当前浏览器中都不可用(演示版暗示了一个定制的WebKit构建)，但是作为概念的证明，非常令人印象深刻。

#8

For people who are asking about the ignored IE10+ support in other answers, checkout this piece of CSS:

对于那些在其他答案中询问被忽略的IE10+支持的人，请查看这段CSS:

img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

svg {
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}

svg image:hover {
    opacity: 0;
}

Applied on this markup:

应用于这个标记:

<!DOCTYPE HTML>
<html>
<head>

    <title>Grayscaling in Internet Explorer 10+</title>

</head>
<body>

    <p>IE10 with inline SVG</p>
    <svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
      <defs>
         <filter id="filtersPicture">
           <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
           <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
        </filter>
      </defs>
      <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
    </svg>

</body>
</html>

For more demos, checkout IE testdrive's CSS3 Graphics section and this old IE blog http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

要了解更多的演示，请查看IE testdrive的CSS3图形部分和这个旧的IE博客http://blogs.msdn.com/b/ie/archive/2012011/10/14/svg -filter- effects-inie10.aspx

#9

In Internet Explorer use the filter property.

在Internet Explorer中使用过滤器属性。

In webkit and Firefox there is currently no way to desatuarte an image solely with CSS. so you will need to use either canvas or SVG for a client side solution.

在webkit和Firefox中，目前没有办法只使用CSS来去除图像。因此，客户端解决方案需要使用canvas或SVG。

But I think using SVG is more elegant. check out my blog post for the SVG solution that works for both Firefox and webkit: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

但是我认为使用SVG更优雅。查看我的博客文章，获得既适用于Firefox又适用于webkit的SVG解决方案:http://webdev.brillout.com/2010/10/desaturate-image- withoutjavascript.html

And strictly speaking since SVG is HTML the solution is pure html+css :-)

严格地说，由于SVG是HTML，所以解决方案是纯HTML +css:-)

#10

A new way to do this has been available for some time now on modern browsers.

一种新的方法已经在现代浏览器上使用一段时间了。

background-blend-mode allows you to get some interesting effects, and one of them is grayscale conversion

后台修改模式允许您获得一些有趣的效果，其中之一是灰度转换

The value luminosity , set on a white background, allows it. (hover to see it in gray)

设置在白色背景上的价值光度允许它。(鼠标悬停在灰色处)

.test {
  width: 300px;
  height: 200px;
    background: url("http://placekitten.com/1000/750"), white; 
    background-size: cover;
}

.test:hover {
    background-blend-mode: luminosity;
}

<div class="test"></div>

The luminosity is taken from the image, the color is taken from the background. Since it is always white, there is no color.

亮度从图像中提取，颜色从背景中提取。因为它总是白色的，所以没有颜色。

But it allows much more.

但它允许更多。

You can animate the effect setting 3 layers. The first one will be the image, and the second will be a white-black gradient. If you apply a multiply blend mode on this, you will get a white result as before on the white part, but the original image on the black part (multiply by white gives white, multiplying by black has no effect.)

你可以设置3层动画效果。第一个是图像，第二个是黑白渐变。如果你在这个上面应用一个多重混合模式，你会得到一个白色的结果，就像之前在白色部分一样，但是在黑色部分的原始图像(乘以白色得到白色，乘以黑色没有效果)。

On the white part of the gradient, you get the same effect as before. On the black part of the gradient, you are blending the image over itself, and the result is the unmodified image.

在渐变的白色部分，你会得到和以前一样的效果。在渐变的黑色部分，你将图像混合在其本身上，结果是未修改的图像。

Now, all that is needed is to move the gradient to get this effect dynamic: (hover to see it in color)

现在，所需要做的就是移动渐变以获得动态效果:(鼠标悬停以查看它的颜色)

div {
    width: 600px;
    height: 400px;
}

.test {
    background: url("http://placekitten.com/1000/750"), 
linear-gradient(0deg, white 33%, black 66%), url("http://placekitten.com/1000/750"); 
    background-position: 0px 0px, 0px 0%, 0px 0px;
    background-size: cover, 100% 300%, cover;
    background-blend-mode: luminosity, multiply;
    transition: all 2s;
}

.test:hover {
    background-position: 0px 0px, 0px 66%, 0px 0px;
}

<div class="test"></div>

reference

参考

compatibility matrix

兼容性矩阵

#11

Simplest way to achieve grayscale with CSS exclusively is via the filter property.

使用CSS实现灰度的最简单方法是通过filter属性。

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

The property is still not fully supported and still requires the -webkit-filter property for support across all browsers.

该属性仍然没有得到完全支持，仍然需要-webkit-filter属性来支持所有浏览器。

#12

Maybe this way help you

也许这条路对你有帮助

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

w3schools.org

#13

It's in fact easier to do it with IE if I remember correctly using a proprietary CSS property. Try this FILTER: Gray from http://www.ssi-developer.net/css/visual-filters.shtml

事实上，如果我正确地使用了私有的CSS属性，那么使用IE就更容易了。试试这个过滤器:来自http://www.ssi-developer.net/css/visual-filters.shtml的灰色

The method by Ax simply makes the image transparent and has a black background behind it. I'm sure you could argue this is grayscale.

Ax使用的方法只是使图像透明，并在其背后有一个黑色背景。我相信你会说这是灰度图。

Although you didn't want to use Javascript, I think you'll have to use it. You could also use a server side language to do it.

虽然您不想使用Javascript，但我认为您必须使用它。您也可以使用服务器端语言来完成。

#14

If you're willing to use Javascript, then you can use a canvas to convert the image to grayscale. Since Firefox and Safari support <canvas>, it should work.

如果您愿意使用Javascript，那么您可以使用画布将图像转换为灰度。由于Firefox和Safari支持

So I googled "canvas grayscale", and the first result was http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html which seems to work.

所以我在谷歌上搜索了“画布灰度”，第一个结果是http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html，它似乎是有效的。

#15

support for native CSS filters in webkit has been added from the current version 19.0.1084.46

目前版本19.0.1084.46增加了对webkit中本地CSS过滤器的支持

so -webkit-filter: grayscale(1) will work and which is easier than SVG approach for webkit...

所以-webkit-filter: grayscale(1)可以工作，这比SVG方法在webkit中更容易实现。

#16

Here's a mixin for LESS that will let you choose any opacity. Fill in the variables yourself for plain CSS at different percentages.

这里有一个小混音，你可以选择任何不透明度。用不同的百分比填写纯CSS的变量。

Neat hint here, it uses the saturate type for the matrix so you don't need to do anything fancy to change the percentage.

简洁的提示，它使用饱和类型的矩阵所以你不需要做任何花哨的改变百分比。

.saturate(@value:0) {
    @percent: percentage(@value);

    filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='saturate'%20values='@value'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: grayscale(@percent); /* Current draft standard */
    -webkit-filter: grayscale(@percent); /* New WebKit */
    -moz-filter: grayscale(@percent);
    -ms-filter: grayscale(@percent);
    -o-filter: grayscale(@percent);
}

Then use it:

然后使用它:

img.desaturate {
    transition: all 0.2s linear;
    .saturate(0);
    &:hover {
        .saturate(1);
    }
}

#17

You don't need use so many prefixes for full use, because if you choose prefix for old firefox, you don't need use prefix for new firefox.

您不需要使用那么多前缀来充分使用，因为如果您为旧的firefox选择前缀，则不需要为新firefox使用前缀。

So for full use, enough use this code:

因此，为了充分使用，请充分使用以下代码:

img.grayscale {
    filter: url("data:image/svg+xml;utf8,<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>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

img.grayscale.disabled {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: none;
    -webkit-filter: grayscale(0%);
}

#18

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

#19

Based on robertc's answer:

基于robertc的回答是:

To get proper conversion from colored image to grayscale image instead of using matrix like this:

为了从彩色图像转换到灰度图像，而不是像这样使用矩阵:

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

You should use conversion matrix like this:

你应该使用这样的转换矩阵:

0.299 0.299 0.299 0
0.587 0.587 0.587 0
0.112 0.112 0.112 0
0     0     0     1

This should work fine for all the types of images based on RGBA (red-green-blue-alpha) model.

这对于基于RGBA(红-绿-蓝-alpha)模型的所有类型的图像都适用。

For more information why you should use matrix I posted more likely that the robertc's one check following links:

关于为什么你应该使用矩阵的更多信息，我更有可能是robertc的一个检查链接:

The luminance and colour difference signals
亮度和色差信号
Margus's answer for question: "greyscalevalue in colorvalue" @* part: Edit 2: @Hans Passant
Margus的问题回答:“greyscalevalue in colorvalue”@* part: Edit 2: @Hans Passant。
Charles A. Bouman - Purdue university - Analog TV page 20 & 21
查尔斯·鲍曼-普渡大学-模拟电视第20和21页
And here you can find some C# and VB codes
在这里你可以找到一些c#和VB代码

#20

As a complement to other's answers, it's possible to desaturate an image half the way on FF without SVG's matrix's headaches:

作为对他人答案的补充，可以在FF上消除图像的一半，而不需要SVG矩阵带来的麻烦:

<feColorMatrix type="saturate" values="$v" />

Where $v is between 0 and 1. It's equivalent to filter:grayscale(50%);.

其中$v在0和1之间。这是相当于过滤器:灰度(50%);。

Live example:

生活例子:

.desaturate {
    filter: url("#desaturate");
    -webkit-filter: grayscale(50%);
}
figcaption{
    background: rgba(55, 55, 136, 1);
    padding: 4px 98px 0 18px;
    color: white;
    display: inline-block;
    border-top-left-radius: 8px;
    border-top-right-radius: 100%;
    font-family: "Helvetica";
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <filter id="desaturate">
  	<feColorMatrix type="saturate" values="0.4"/>
  </filter>
</svg>

<figure>
  <figcaption>Original</figcaption>
  <img src="http://www.placecage.com/c/500/200"/>
  </figure>
<figure>
  <figcaption>Half grayed</figcaption>
  <img class="desaturate" src="http://www.placecage.com/c/500/200"/>
</figure>

Reference on MDN

参考MDN

#21

One terrible but workable solution: render the image using a Flash object, which then gives you all the transformations possible in Flash.

一个糟糕但可行的解决方案是:使用Flash对象呈现图像，然后在Flash中提供所有可能的转换。

If your users are using bleeding-edge browsers and if Firefox 3.5 and Safari 4 support it (I don't know that either do/will), you could adjust the CSS color-profile attribute of the image, setting it to a grayscale ICC profile URL. But that's a lot of if's!

如果您的用户正在使用最新的浏览器，如果Firefox 3.5和Safari 4支持它(我不知道两者都支持)，您可以调整图像的CSS颜色配置属性，将其设置为一个灰度ICC配置文件URL。但那是很多的如果!

#22

be An alternative for older browser could be to use mask produced by pseudo-elements or inline tags.

旧浏览器的另一种选择是使用伪元素或内联标签生成的掩码。

Absolute positionning hover an img (or text area wich needs no click nor selection) can closely mimic effects of color scale , via rgba() or translucide png .

通过rgba()或translucide png，绝对定位鼠标悬停在img(或不需要点击或选择的文本区域)可以很好地模拟颜色比例的效果。

It will not give one single color scale, but will shades color out of range.

它不会给一个单一的颜色标度，但会使颜色超出范围。

test on code pen with 10 different colors via pseudo-element, last is gray . http://codepen.io/gcyrillus/pen/nqpDd (reload to switch to another image)

通过伪元素对10种不同颜色的代码笔进行测试，最后是灰色。http://codepen。io/gcyrillus/pen/nqpDd(重新加载以切换到另一个图像)

#23

You can use one of the functions of jFunc - use the function "jFunc_CanvasFilterGrayscale" http://jfunc.com/jFunc-functions.aspx

您可以使用jFunc的一个函数——使用函数“jFunc_CanvasFilterGrayscale”http://jfunc.com/jfunction -functions.aspx

#24

Try this jquery plugin. Although, this is not a pure HTML and CSS solution, but it is a lazy way to achieve what you want. You can customize your greyscale to best suit your usage. Use it as follow:

试试这个jquery插件。虽然这不是一个纯HTML和CSS解决方案，但它是实现您想要的东西的惰性方式。您可以定制您的灰度，以最适合您的使用。把它作为:

$("#myImageID").tancolor();

There's an interactive demo. You can play around with it.

有一个互动的演示。你可以随便玩玩。

Check out the documentation on the usage, it is pretty simple. docs

查看有关用法的文档，它非常简单。文档

#25

If you, or someone else facing a similar problem in future are open to PHP. (I know you said HTML/CSS, but maybe you are already using PHP in the backend) Here is a PHP solution:

如果您或将来遇到类似问题的其他人对PHP开放。(我知道你说的是HTML/CSS，但也许你已经在后台使用PHP了)这里有一个PHP解决方案:

I got it from the PHP GD library and added some variable to automate the process...

我从PHP GD库中获得了它，并添加了一些变量来自动化这个过程…

<?php
$img = @imagecreatefromgif("php.gif");

if ($img) $img_height = imagesy($img);
if ($img) $img_width = imagesx($img);

// Create image instances
$dest = imagecreatefromgif('php.gif');
$src = imagecreatefromgif('php.gif');

// Copy and merge - Gray = 20%
imagecopymergegray($dest, $src, 0, 0, 0, 0, $img_width, $img_height, 20);

// Output and free from memory
header('Content-Type: image/gif');
imagegif($dest);

imagedestroy($dest);
imagedestroy($src);

?>

#26

For grayscale as a percent in Firefox, use saturate filter instead: (search for 'saturate')

在Firefox中，灰度为百分比，使用饱和过滤器(搜索“饱和”)

filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='saturate'><feColorMatrix in='SourceGraphic' type='saturate' values='0.2' /></filter></svg>#saturate"

#1

674