在64基编码的图像中可以替换颜色吗？
在64基编码的图像中可以替换颜色吗？
提问于 2012-11-16 15:00:11
是否有任何方法可以接受基本64字符串，例如：
.copyIcon {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAW0lEQVR42mNgQALCi7//J4QZcAFiNOM1hJANBA0h1QC83iHFizDJ/dgww/7/LAQNwKUZbkjDfya8YQZXiCqJagilBmAzhLYGYDNsJBhAMD3gS854NS/6vg+fZgDKvmW19S7PRAAAAABJRU5ErkJggg==") center center no-repeat;}然后用JavaScript用另一种纯色替换纯色？
在这个特定的例子中，我在图标(#13A3F7)中有一个实色，我想用另一个实色(#ff6400)代替它。
这样做的原因是它不是一次性的。我希望能够改变图标的任何颜色与设置。
有什么办法我能做到吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-11-16 15:20:31
这里有一个小函数，它包含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"
);它将返回一个新的数据:image/png；URI和交换的颜色，下面是对最终结果的一个有效的修改
http://jsfiddle.net/V5dU2/
(在Chrome、Firefox和IE10上进行测试)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13419101
复制相关文章
相似问题
腾讯云开发者
