javascript - 使用 javascript 编辑图像

Question

在创建我的 html5 游戏引擎时，我已经能够做一些不错的事情并获得一些很酷的功能。在制作游戏的契约(Contract)中，我被要求查看是否可以从 sprite 图像中删除背景颜色。我看到了这样做的好处，因为我们可以在 png 上使用 jpg 代替 png 并减小图像的大小。

有什么方法可以用纯 javascript 做到这一点吗？我希望能够在不使用 canvas 元素的情况下执行此操作，这样它可以更快，但如果我必须这样做也没关系。

如果我必须这样做，我还有另一个问题，我不希望 Canvas 对象显示我使用过，我可以使用带有 document.createElement 的 Canvas 对象而不将其应用于文档吗？那会很好，因为它不必呈现到网页上。如果不是，我想我可以将 Canvas 对象移到左侧不可见。

最后，您认为预处理图像的好方法是将它们发送到服务器 cgi 脚本并让它返回一个 json 像素数组吗？

Answer 1

这里是 floodfill 算法的函数，它从已经绘制在 Canvas 上的图像中删除了背景。

在下面的代码中，canvas 是 HTML5 canvas 元素和它的上下文 canvas.getContext("2d")。您可以更改 colorRange 的值并尝试使用不同颜色的功能。函数的最后一行

 imageElement.src=canvas.toDataURL("image/png");

是在 img 标签内显示图像。因此，您的页面上需要一个 img 和一个 Canvas 。如果您不想在 img 元素中显示图像，只需删除最后一行。

// Remove backgroud without ajax call, can be used in non IE browsers.
function RemoveBackground(){

    var startR,startG,startB;
    var canvasData;

    var canvasWidth=canvas.width;
    var canvasHeight=canvas.height;
    canvasData=mainContext.getImageData(0,0,canvasWidth,canvasHeight);
    startR = canvasData.data[0];
    startG = canvasData.data[1];
    startB = canvasData.data[2];
    if(startR==0&& startG==0 && startR==0) return;
    var pixelStack = [[0, 0]];  
    while(pixelStack.length)
    {
      var newPos, x, y, pixelPos, reachLeft, reachRight;
      newPos = pixelStack.pop();
      x = newPos[0];
      y = newPos[1];

      pixelPos = (y*canvasWidth + x) * 4;
      while(y-- >= 0 && matchStartColor(pixelPos,canvasData,startR,startG,startB)){
        pixelPos -= canvasWidth * 4;
    }
      pixelPos += canvasWidth * 4;
      ++y;
      reachLeft = false;
      reachRight = false;
      while(y++ < canvasHeight-1 && matchStartColor(pixelPos,canvasData,startR,startG,startB))
      {
        colorPixel(pixelPos,canvasData);
        if(x > 0)
        {
          if(matchStartColor(pixelPos-4,canvasData,startR,startG,startB))
          {
            if(!reachLeft){
              pixelStack.push([x - 1, y]);
              reachLeft = true;
            }
          }
          else if(reachLeft)
          {
            reachLeft = false;
          }
        }

        if(x < canvasWidth-1)
        {
          if(matchStartColor(pixelPos+4,canvasData,startR,startG,startB))
          {
            if(!reachRight)
            {
              pixelStack.push([x + 1, y]);
              reachRight = true;
            }
          }
          else if(reachRight)
          {
            reachRight = false;
          }
        }   
        pixelPos += canvasWidth * 4;
      }
    }
    context.putImageData(canvasData, 0, 0);
    imageElement.src=canvas.toDataURL("image/png");

}

// Helper function for remove background color.
function matchStartColor(pixelPos,canvasData,startR,startG,startB)
{
  var r = canvasData.data[pixelPos];    
  var g = canvasData.data[pixelPos+1];  
  var b = canvasData.data[pixelPos+2];
  var colorRange=8;

  return ((r >= startR-colorRange && r<=startR+colorRange) 
        &&( g >= startG-colorRange && g<=startG+colorRange)
        &&( b >= startB-colorRange && b<= startB+colorRange));
}
// Helper function for remove background color.
function colorPixel(pixelPos,canvasData)
{
  canvasData.data[pixelPos] = 255;
  canvasData.data[pixelPos+1] = 255;
  canvasData.data[pixelPos+2] = 255;
}