如何在 Internet Explorer 中更改图像颜色？

Question

我已成功使用 CSS3 在 Chrome 和 Firefox 中更改 png 图像颜色。

我的代码：

#second_image{
  -webkit-filter: hue-rotate(59deg);
  filter: hue-rotate(59deg);
}

<img src='http://i.imgur.com/uGjlkRz.png' />
<img id='second_image' src='http://i.imgur.com/uGjlkRz.png' />

另见this Fiddle。

我的问题是我不知道如何在 Internet Explorer 中做同样的事情。至少从 IE 的 v9 开始。甚至可能吗？我什至接受 JavaScript 或 jQuery 解决方案或某种想法。

Answer 1

恐怕这在任何版本的 Internet Explorer 中都不可能。

在我撰写这篇文章时（2016 年 3 月 25 日），以下是对哪些浏览器支持 CSS 过滤器的概述：

如需了解最新概览，请take a look at CanIUse。

虽然 there IS a polyfill for CSS filters，但它不支持 IE 10+、基于 Presto 的旧版 Opera、Opera Mini 或 Android 浏览器。

此外，仅支持以下过滤器：

• 灰度（IE 中只有 0% 或 100% 的值）
• 棕褐色（IE 中只有 0% 或 100% 的值）
• 模糊
• 反转（IE 中只有 0% 或 100% 的值）
• 亮度
• 投影

---

替代方法

一种可能的解决方法是使用 PHP 等后端语言来处理您的文件。

考虑使用以下代码的index.php 文件：

<?php

error_reporting(E_ALL);
ini_set("display_errors", 1);

function rgb2hsl($r, $g, $b) {
    $var_R = ($r / 255);
    $var_G = ($g / 255);
    $var_B = ($b / 255);

    $var_Min = min($var_R, $var_G, $var_B);
    $var_Max = max($var_R, $var_G, $var_B);
    $del_Max = $var_Max - $var_Min;

    $v = $var_Max;

    if ($del_Max == 0) {
        $h = 0;
        $s = 0;
    } else {
        $s = $del_Max / $var_Max;

        $del_R = ( ( ( $var_Max - $var_R ) / 6 ) + ( $del_Max / 2 ) ) / $del_Max;
        $del_G = ( ( ( $var_Max - $var_G ) / 6 ) + ( $del_Max / 2 ) ) / $del_Max;
        $del_B = ( ( ( $var_Max - $var_B ) / 6 ) + ( $del_Max / 2 ) ) / $del_Max;

        if ($var_R == $var_Max)
            $h = $del_B - $del_G;
        else if ($var_G == $var_Max)
            $h = ( 1 / 3 ) + $del_R - $del_B;
        else if ($var_B == $var_Max)
            $h = ( 2 / 3 ) + $del_G - $del_R;

        if ($h < 0)
            $h++;
        if ($h > 1)
            $h--;
    }

    return array($h, $s, $v);
}

function hsl2rgb($h, $s, $v) {
    if ($s == 0) {
        $r = $g = $B = $v * 255;
    } else {
        $var_H = $h * 6;
        $var_i = floor($var_H);
        $var_1 = $v * ( 1 - $s );
        $var_2 = $v * ( 1 - $s * ( $var_H - $var_i ) );
        $var_3 = $v * ( 1 - $s * (1 - ( $var_H - $var_i ) ) );

        if ($var_i == 0) {
            $var_R = $v;
            $var_G = $var_3;
            $var_B = $var_1;
        } else if ($var_i == 1) {
            $var_R = $var_2;
            $var_G = $v;
            $var_B = $var_1;
        } else if ($var_i == 2) {
            $var_R = $var_1;
            $var_G = $v;
            $var_B = $var_3;
        } else if ($var_i == 3) {
            $var_R = $var_1;
            $var_G = $var_2;
            $var_B = $v;
        } else if ($var_i == 4) {
            $var_R = $var_3;
            $var_G = $var_1;
            $var_B = $v;
        } else {
            $var_R = $v;
            $var_G = $var_1;
            $var_B = $var_2;
        }

        $r = $var_R * 255;
        $g = $var_G * 255;
        $B = $var_B * 255;
    }
    return array($r, $g, $B);
}

function imagehue(&$image, $angle) {
    if ($angle) {
        if ($angle % 360 == 0)
            return;
        $width = imagesx($image);
        $height = imagesy($image);

        for ($x = 0; $x < $width; $x++) {
            for ($y = 0; $y < $height; $y++) {
                $rgb = imagecolorat($image, $x, $y);
                $r = ($rgb >> 16) & 0xFF;
                $g = ($rgb >> 8) & 0xFF;
                $b = $rgb & 0xFF;
                $alpha = ($rgb & 0x7F000000) >> 24;
                list($h, $s, $l) = rgb2hsl($r, $g, $b);
                $h += $angle / 360;
                if ($h > 1)
                    $h--;
                list($r, $g, $b) = hsl2rgb($h, $s, $l);
                imagesetpixel($image, $x, $y, imagecolorallocatealpha($image, $r, $g, $b, $alpha));
            }
        }
    }
}

if (isset($_GET['src'])) {
    switch (exif_imagetype($_GET['src'])) {
        case IMAGETYPE_PNG:
            header('Content-type: image/png');
            $image = @imagecreatefrompng($_GET['src']);
            imagealphablending($image, false);
            imagesavealpha($image, true);
            imagehue($image, isset($_GET['hue-rotate']) ? $_GET['hue-rotate'] : FALSE);
            imagepng($image);
            imagedestroy($image);
            break;
        case IMAGETYPE_JPEG:
            header('Content-type: image/jpeg');
            $image = @imagecreatefromjpeg($_GET['src']);
            imagehue($image, isset($_GET['hue-rotate']) ? $_GET['hue-rotate'] : FALSE);
            imagejpeg($image);
            imagedestroy($image);
            break;
        default:
            break;
    }
}

如果您将该文件放在支持 PHP 的服务器上，您可以这样使用它：

<img src='http://www.johnslegers.com/hue-rotate/?src=http://i.imgur.com/uGjlkRz.png' />
<img src='http://www.johnslegers.com/hue-rotate/?src=http://i.imgur.com/uGjlkRz.png&hue-rotate=59' />
<img src='http://www.johnslegers.com/hue-rotate/?src=http://i.imgur.com/uGjlkRz.png&hue-rotate=95' />
<img src='http://www.johnslegers.com/hue-rotate/?src=http://i.imgur.com/uGjlkRz.png&hue-rotate=163' />
<img src='http://www.johnslegers.com/hue-rotate/?src=http://i.imgur.com/uGjlkRz.png&hue-rotate=234' />

Answer 2

每个浏览器都有一种引擎，所以，尝试使用它，可能适用于所有浏览器

  -webkit-filter: //do whatever you want;
  -moz-filter: //do whatever you want;
  -ms-filter: //do whatever you want;
  -o-filter: //do whatever you want;
  filter: //do whatever you want;
  filter: //do whatever you want; /* Firefox 4+ */
  filter: //do whatever you want; /* IE 6-9 */

http://labs.voronianski.com/css3-grayscale/