如何在Internet Explorer中更改图像颜色？ [英] How to change images colors in Internet Explorer?

问题描述

我已成功使用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'/>  

另见

要获得最新概述， 查看CanIUse 。

有一个用于CSS过滤器的polyfill ，它不支持IE 10+，较旧的基于Presto的Opera，Opera Mini或Android浏览器。

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

• 灰度（IE中只有0％或100％的值）


• 棕褐色（仅限） IE中0％或100％的值）


• 模糊


• 反转（IE中只有0％或100％的值）


• 亮度


• drop-shadow

---

替代方法

一种可能的解决方法是使用像PHP这样的后端语言来处理你的文件。

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

 <？php 
 
 error_reporting（E_ALL）; 
 ini_set（display_errors，1）; 
 
函数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--; 
} 
 
返回数组（$ h，$ s，$ v）; 
} 
 
函数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; 
} 
返回数组（$ r，$ g，$ B）; 
} 
 
函数imagehue（& $ image，$ angle）{
 if（$ angle）{
 if（$ angle％360 == 0）
返回; 
 $ 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）; 
休息; 
 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; 
} 
} 
  

如果将该文件放在支持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'/>  

I've succeded changing png images colors in Chrome and Firefox with CSS3.

My code:

#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' />

See also this Fiddle.

My problem is that I don't know how to do the same thing in Internet Explorer. At least from v9 up of IE. Is it even possible? I accept even JavaScript or jQuery solutions or some sort of ideas.

解决方案

I'm afraid this is not possible in any version of Internet Explorer.

Here's an overview of which browsers have support for CSS Filters at the moment I'm writing this post (March 25th, 2016) :

For an up-to-date overview, take a look at CanIUse.

While there IS a polyfill for CSS filters, it has no support for IE 10+, older Presto-based Operas, Opera Mini or Android browser.

Also, there's only support for the following filters :

• grayscale (only 0% or 100% values in IE)
• sepia (only 0% or 100% values in IE)
• blur
• invert (only 0% or 100% values in IE)
• brightness
• drop-shadow

---

Alternative approach

One possible workaround would be to use a backend language like PHP to process your file.

Consider an index.php file with the following code :

<?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;
    }
}

If you put that file at a server that supports PHP, you could use it like this:

<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' />

这篇关于如何在Internet Explorer中更改图像颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！