Question

我正在尝试使用HTML5的画布制作游戏。我有一些精灵，我能够很好地加载它们，并且它们工作正常，但图像的某些部分是专门的#ff0000，我希望能够用其他颜色替换它，一个定制用户定义的颜色。

我并没有真正领先于此，我有点看过图像过滤器，但我并没有真正找到适合我用途的任何例子，并且没有大脑能够独立思考，相信我，我试过了。

非常感谢任何帮助，领导或任何帮助。

Answer 1

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

Answer 2

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

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

在图像/精灵中替换另一种特定颜色

2 个答案: