在图像/ sprite中替换特定颜色 [英] Replace a specific color by another in an image/sprite
问题描述
我想用HTML5的画布制作游戏。我有一些精灵，我可以加载他们很好，他们工作正常，但图像的一些部分具体＃ff0000 ，我想能够以一些其他颜色，自定义用户定义的颜色替换它。
I am trying to make a game with HTML5's canvas. I have some sprites, I am able to load them well, and they work fine, but some of the parts of the image are specifically #ff0000 and I would like to be able to replace it by some other color, a custom user defined color.
我真的没有一个铅笔，我有一个锯的图像过滤器，但我didn我真的找到了适合我使用的例子，没有大脑自己想想，相信我，我试过了。
I don't really have a lead on this, I sort of saw image filters, but I didn't really find any examples suited for my usage, and don't have the brains to think it up on my own, trust me, I've tried.
任何
推荐答案
您可以使用canvas'getImageData以任何其他颜色替换任何颜色
You can use canvas’ getImageData to replace any color with any other color.
// 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/
Here is code and a Fiddle: 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>
这篇关于在图像/ sprite中替换特定颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
