javascript 是否可以替换基本 64 位编码图像中的颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13419101/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to replace a color in a base 64-encoded image?
提问by Tim
Is there any way to take a base 64 string, for example:
有什么办法可以使用 base 64 字符串，例如：
.copyIcon {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAW0lEQVR42mNgQALCi7//J4QZcAFiNOM1hJANBA0h1QC83iHFizDJ/dgww/7/LAQNwKUZbkjDfya8YQZXiCqJagilBmAzhLYGYDNsJBhAMD3gS854NS/6vg+fZgDKvmW19S7PRAAAAABJRU5ErkJggg==") center center no-repeat;}
And replace a solid color with another solid color using JavaScript?
并使用 JavaScript 用另一种纯色替换纯色？
In this specific example I have a solid color in the icon (#13A3F7) that I would like to replace with another solid color (#ff6400).
在这个特定的例子中，我在图标 ( #13A3F7) 中有一个纯色，我想用另一种纯色 ( #ff6400)替换它。
The reason for doing this is it is not a one-off. I would like to be able to change the icon to anycolor with a setting.
这样做的原因是它不是一次性的。我希望能够通过设置将图标更改为任何颜色。
Is there any way I can do this?
有什么办法可以做到这一点吗？
回答by lostsource
Here is a little function which takes 3 parameters: data, colorFrom, colorTo (both colors should be supplied in hex)
这是一个带有 3 个参数的小函数：data、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();
}
An additional function is required to convert hex colors to RGB (for correct matching)
需要附加功能将十六进制颜色转换为 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;
}
Usage would be like so:
用法如下：
changeColInUri(
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAW0lEQVR42mNgQALCi7//J4QZcAFiNOM1hJANBA0h1QC83iHFizDJ/dgww/7/LAQNwKUZbkjDfya8YQZXiCqJagilBmAzhLYGYDNsJBhAMD3gS854NS/6vg+fZgDKvmW19S7PRAAAAABJRU5ErkJggg==",
"#13A3F7",
"#ff6400"
);
It will return a new data:image/png; URI with the swapped colors, here is a working jsfiddle of the end result
它将返回一个新的 data:image/png; 具有交换颜色的 URI，这是最终结果的有效 jsfiddle
(tested on Chrome, Firefox and IE10)
（在 Chrome、Firefox 和 IE10 上测试）
