Bạn có thể sử dụng canvas 'getImageData để thay thế bất kỳ màu nào bằng bất kỳ màu nào khác.
// 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);
Đây là mã và một 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>
Bạn đang tìm kiếm để trực tiếp thay đổi pixel riêng lẻ trong các phần cụ thể của một hình ảnh hoặc một cái gì đó rộng hơn mà chỉ áp dụng đối với hình ảnh đầy đủ? – newfurniturey
Cái gì đó 'quét' toàn bộ hình ảnh cho một màu nhất định và thay thế nó. –