用图像/精灵中的另一个替换特定颜色

我想用HTML5的画布制作游戏。我有一些精灵，我可以很好地加载它们，并且它们工作正常，但图像的某些部分特别是#ff0000，我希望能够用其他颜色（用户定义的颜色）替换它。用图像/精灵中的另一个替换特定颜色

我并没有真正领先，我看过图像过滤器，但我没有找到适合我使用的任何示例，也没有思考过我自己的想法，相信我，我试过了。

任何帮助，铅或任何将不胜感激。

来源

2013-04-26 Alexandre Hitchcox

您是否希望直接改变单个像素的图像或一些更宽泛，仅仅适用于整个图像的特定部分？ – newfurniturey 2013-04-26 03:04:09

某物以某种颜色“扫描”整个图像并替换它。 – 2013-04-26 03:06:47

您可以使用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();

我使用这种确切的技术来设置我的位图字体的文本颜色。

来源

2013-04-26 03:29:25 Jarrod

OP希望在多色图像上替换1种颜色，以便他们还需要您向他们展示如何创建用于您的源代码的颜色蒙版。 :) – markE 2013-04-26 03:52:19

@markE我只是把你指向正确的方向。这是你的工作现在;） – Jarrod 2013-04-26 03:55:30

笑 - 好吧，但它是在午夜后，我困了，所以我会显示getImageData。我**喜欢**你在生产中合成蒙面颜色的想法 - 不知何故看起来更清洁。 G'nite，伙计！ – markE 2013-04-26 04:32:41

您可以使用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>

来源

2013-04-26 04:28:41 markE

我遇到问题。它取代了大部分颜色，但不是全部。如果对结果有任何影响，我会在更改颜色之前缩小画布。有任何想法吗？ – 2016-07-21 19:33:36

用图像/精灵中的另一个替换特定颜色

回答

相关问题