javascript - 在 Base 64 编码的图像中,是否可以替换颜色?

  显示原文与译文双语对照的内容
0 0

有什么方法能将base64字符串,例如:

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

并替换纯色加纯色使用Javascript?

在此特定示例中我有纯色图标( #13A3F7),我想把它替换为另一个纯色( #ff6400) 。

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

有没有办法让我这样做?

时间:原作者:2个回答

0 0

这里是一个函数,该函数有3 个参数: 数据,colorFrom colorTo颜色( 包括提供为十六进制)

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以了解正确的匹配)

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

使用将会如下所示:

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

它将返回新data:image/png,文件流,换颜色,下面是jsfiddle北半球的最终结果

http://jsfiddle .net/V5dU2/

( 已在Chrome,firefox和IE10 )

原作者:
0 0

搞好快速Google搜索我穿过这些站点可能充当指南去做你们的请求。

Dynamically Generated CSS less中Images

原作者:
...