用图像/精灵中的另一个替换特定颜色
问题描述：
我想用HTML5的画布制作游戏。我有一些精灵，我可以很好地加载它们，并且它们工作正常，但图像的某些部分特别是#ff0000，我希望能够用其他颜色（用户定义的颜色）替换它。用图像/精灵中的另一个替换特定颜色
我并没有真正领先，我看过图像过滤器，但我没有找到适合我使用的任何示例，也没有思考过我自己的想法，相信我，我试过了。
任何帮助，铅或任何将不胜感激。
答
您可以使用globalCompositeOperation = "source-in"
例如，下面的绘制图像的（新）帆布，并设置颜色。
ctx.save();
// Draw mask to buffer
ctx.clearRect(0, 0, this.width, this.height);
ctx.drawImage(your_image, 0, 0, this.width, this.height, 0, 0, this.width, this.height);
// Draw the color only where the mask exists (using source-in)
ctx.fillStyle = [your color]; //
ctx.globalCompositeOperation = "source-in";
ctx.fillRect(0, 0, this.width, this.height);
ctx.restore();
我使用这种确切的技术来设置我的位图字体的文本颜色。
答
您可以使用canvas'getImageData将任何颜色替换为任何其他颜色。
// pull the entire image into an array of pixel data
var imageData = context.getImageData(0, 0, w, h);
// examine every pixel,
// change any old rgb to the new-rgb
for (var i=0;i<imageData.data.length;i+=4)
{
// is this pixel the old rgb?
if(imageData.data[i]==oldRed &&
imageData.data[i+1]==oldGreen &&
imageData.data[i+2]==oldBlue
){
// change to your new rgb
imageData.data[i]=newRed;
imageData.data[i+1]=newGreen;
imageData.data[i+2]=newBlue;
}
}
// put the altered data back on the canvas
context.putImageData(imageData,0,0);
这里是代码和一个小提琴：http://jsfiddle.net/m1erickson/4apAS/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; padding:20px; }
img{border:1px solid red;}
</style>
<script>
$(function(){
// this just makes an image we can test with
// it's just an image of a red rectangle
var temp=document.createElement("canvas");
var tempctx=temp.getContext("2d");
tempctx.fillStyle="red";
tempctx.strokeStyle="blue";
tempctx.lineWidth=5;
tempctx.rect(20,20,75,50);
tempctx.fill();
var image0=document.getElementById("image0");
image0.src=temp.toDataURL();
var image=new Image();
image.onload=function(){
// call function to replace red with green
recolorImage(image,255,0,0,0,255,0);
}
image.src= image0.src;
function recolorImage(img,oldRed,oldGreen,oldBlue,newRed,newGreen,newBlue){
var c = document.createElement('canvas');
var ctx=c.getContext("2d");
var w = img.width;
var h = img.height;
c.width = w;
c.height = h;
// draw the image on the temporary canvas
ctx.drawImage(img, 0, 0, w, h);
// pull the entire image into an array of pixel data
var imageData = ctx.getImageData(0, 0, w, h);
// examine every pixel,
// change any old rgb to the new-rgb
for (var i=0;i<imageData.data.length;i+=4)
{
// is this pixel the old rgb?
if(imageData.data[i]==oldRed &&
imageData.data[i+1]==oldGreen &&
imageData.data[i+2]==oldBlue
){
// change to your new rgb
imageData.data[i]=newRed;
imageData.data[i+1]=newGreen;
imageData.data[i+2]=newBlue;
}
}
// put the altered data back on the canvas
ctx.putImageData(imageData,0,0);
// put the re-colored image back on the image
var img1=document.getElementById("image1");
img1.src = c.toDataURL('image/png');
}
}); // end $(function(){});
</script>
</head>
<body>
<p>Original Image</p>
<img id="image0" width=200 height=200><br/>
<p>Red recolored Green Image</p>
<img id="image1" width=200 height=200>
</body>
</html>
+0
我遇到问题。它取代了大部分颜色，但不是全部。如果对结果有任何影响，我会在更改颜色之前缩小画布。有任何想法吗？ – 2016-07-21 19:33:36
您是否希望直接改变单个像素的图像或一些更宽泛，仅仅适用于整个图像的特定部分？ – newfurniturey 2013-04-26 03:04:09
某物以某种颜色“扫描”整个图像并替换它。 – 2013-04-26 03:06:47