是否可以更换颜色基地64-CN codeD映像？ [英] Is it possible to replace a color in a base 64-encoded image?

问题描述

有没有办法把一个基地64字符串，例如：

Is there any way to take a base 64 string, for example:

.copyIcon {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAW0lEQVR42mNgQALCi7//J4QZcAFiNOM1hJANBA0h1QC83iHFizDJ/dgww/7/LAQNwKUZbkjDfya8YQZXiCqJagilBmAzhLYGYDNsJBhAMD3gS854NS/6vg+fZgDKvmW19S7PRAAAAABJRU5ErkJggg==") center center no-repeat;}

和与使用JavaScript另一种纯色取代纯色？

And replace a solid color with another solid color using JavaScript?

在这个具体的例子我在图标纯色（＃13A3F7 ），我想与其他纯色（更换＃ ff6400 ）。

In this specific example I have a solid color in the icon (#13A3F7) that I would like to replace with another solid color (#ff6400).

这样做的原因，这是它不是一次性的。我希望能够将图标与设置更改的任何的颜色。

The reason for doing this is it is not a one-off. I would like to be able to change the icon to any color with a setting.

有没有什么办法可以做到这一点？

Is there any way I can do this?

推荐答案

下面是一个小函数，它接受3个参数：数据，colorFrom，colorTo（两种颜色应以十六进制提供）

Here is a little function which takes 3 parameters: data, colorFrom, colorTo (both colors should be supplied in hex)

function changeColInUri(data,colfrom,colto) {
    // create fake image to calculate height / width
    var img = document.createElement("img");
    img.src = data;
    img.style.visibility = "hidden";
    document.body.appendChild(img);

    var canvas = document.createElement("canvas");
    canvas.width = img.offsetWidth;
    canvas.height = img.offsetHeight;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img,0,0);

    // remove image
    img.parentNode.removeChild(img);

    // do actual color replacement
    var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
    var data = imageData.data;

    var rgbfrom = hexToRGB(colfrom);
    var rgbto = hexToRGB(colto);

    var r,g,b;
    for(var x = 0, len = data.length; x < len; x+=4) {
        r = data[x];
        g = data[x+1];
        b = data[x+2];

        if((r == rgbfrom.r) &&
           (g == rgbfrom.g) &&
           (b == rgbfrom.b)) {

            data[x] = rgbto.r;
            data[x+1] = rgbto.g;
            data[x+2] = rgbto.b;

        } 
    }

    ctx.putImageData(imageData,0,0);

    return canvas.toDataURL();
}

这是附加功能，需要十六进制颜色转换为RGB（正确的匹配）

An additional function is required to convert hex colors to RGB (for correct matching)

function hexToRGB(hexStr) {
    var col = {};
    col.r = parseInt(hexStr.substr(1,2),16);
    col.g = parseInt(hexStr.substr(3,2),16);
    col.b = parseInt(hexStr.substr(5,2),16);
    return col;
}

用法是，像这样：

Usage would be like so:

changeColInUri(
    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAW0lEQVR42mNgQALCi7//J4QZcAFiNOM1hJANBA0h1QC83iHFizDJ/dgww/7/LAQNwKUZbkjDfya8YQZXiCqJagilBmAzhLYGYDNsJBhAMD3gS854NS/6vg+fZgDKvmW19S7PRAAAAABJRU5ErkJggg==",
    "#13A3F7",
    "#ff6400"
);

它会返回一个新的数据：图像/ PNG; URI对换颜色，这里是最终结果的一个工作的jsfiddle

It will return a new data:image/png; URI with the swapped colors, here is a working jsfiddle of the end result

http://jsfiddle.net/V5dU2/

（在Chrome，Firefox和IE10测试）

(tested on Chrome, Firefox and IE10)

这篇关于是否可以更换颜色基地64-CN codeD映像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！