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);
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>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
