Javascript 是否可以替换base 64编码图像中的颜色？

是否有任何方法可以使用base 64字符串，例如：

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

并使用JavaScript将一种纯色替换为另一种纯色

在这个特定示例中，我在图标（

#13A3F7

）中有一个纯色，我想用另一个纯色（

#ff6400

）替换它

这样做的原因是它不是一次性的。我想能够改变图标的任何设置颜色

---

有什么方法可以做到这一点吗？

这里有一个小函数，它接受3个参数：data、colorFrom、colorTo（两种颜色都应该以十六进制提供）

用法如下：

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

它将返回一个新数据：image/png；带有交换颜色的URI，下面是最终结果的工作JSFIDLE

---

（在Chrome、Firefox和IE10上测试）

好主意。请注意，它确实需要

支持，而IE 8和早期版本在本机上没有。@PaulD.Waite IMHO，因为IE 8甚至不能很好地处理数据URI（最大长度为32KB），这应该不是一个问题。从我在caniuse.com上读到的信息来看，IE的问题（如您所注意的，取决于大小）是HTML中的数据URI，不在CSS中…如果有帮助的话。您好，回答和脚本都很好。实施它。但是，在第一次加载时，它似乎总是输出一个透明的png。当在用户交互上使用脚本时，它似乎工作得很好。有人遇到此问题吗？

DOMEException:未能在“CanvasRenderingContext2D”上执行“getImageData”：源宽度为0

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"
);