javascript - 使图像变白透明的算法

Question

此处的这种效果(下图)是通过几个简单的 Photoshop 步骤实现的，颜色部分变为白色，背景(各种深浅不一的白灰色)变为透明。有可能用 Canvas 实现吗？

下面圆圈内的图片是最终结果。

图像最初是彩色的，就像从顶部图像开始的第二张图像是这样的:

看到中间那个圆圈，基本上所有的白色都被锯掉了。

与此 zoho Logo 相同:

倒数第二个本来是这样的:

除了中间的红色 R 只是一个 Y，而不是图像中看到的所有文本和绿色 strip ，它周围只有一些灰色阴影的颗粒状纹理。并通过 photoshop 将 Y 变为透明，纹理和图章变为实心，移除 3d 阴影等。

通过 photoshop 算法将这个放在 yandex 邮票上面给出了这个(我用黑色替换了白色用于演示/可见性 purproses)

经过 photoshop 算法后，这是锯齿状的，但在最终应用程序中，图像被缩小到 80x80 像素左右，这使得它看起来非常平滑且消除了锯齿。所以真正的最终结果是这个看起来非常不错。

Answer 1

问题是多方面的，因为有些区域需要不同的方法，例如，最后一个图像的主要文本需要转换为白色但保持透明，而同一图像中的底部栏是纯色但需要白色要保留的文本，同时要删除的纯色背景。

通过实现工具来选择区域并手动应用各种运算符是可行的 - 自动将是一个比看起来要大得多的挑战。

您可以要求用户只上传带有 alpha channel 的图像。为此，您可以简单地将每个非透明像素替换为白色。在我看来，这更像是一个政策问题，而不是技术问题。

例如

取标志:

var img = new Image();
img.crossOrigin = "";
img.onload = process;
img.src = "http://i.imgur.com/HIhnb4A.png";        // load the logo

function process() {
  var canvas = document.querySelector("canvas"),   // canvas
      ctx = canvas.getContext("2d"),               // context
      w = this.width,                              // image width/height
      h = this.height,
      idata, data32, len, i, px;                   // iterator, pixel etc.
  
  canvas.width = w;                                // set canvas size
  canvas.height = h;
  ctx.drawImage(this, 0, 0);                       // draw in image
  
  idata = ctx.getImageData(0, 0, w, h);            // get imagedata
  data32 = new Uint32Array(idata.data.buffer);     // use uint32 view for speed
  len = data32.length;
  
  for(i = 0; i < len; i++) {
    // extract alpha channel from a pixel
    px = data32[i] & 0xff000000;                   // little-endian: ABGR
    
    // any non-transparency? ie. alpha > 0
    if (px) {
      data32[i] = px | 0xffffff;    // set this pixel to white, keep alpha level
    }
  }
  
  // done
  ctx.putImageData(idata, 0, 0);
}

body {background:gold}

<canvas></canvas>

现在问题很容易发现:“@”字符只是实心的，因为它后面没有透明度。要实现自动化，首先需要淘汰所有白人，然后应用上面演示的过程。然而，这可能适用于这种情况，但对大多数人来说可能不是一件好事。

还会存在抗锯齿问题，因为我们不分析白色像素周围的边缘，因此无法知道您想要剔除多少白色。另一个可能的挑战是 ICC 校正图像，其中白色可能不是白色，具体取决于使用的 ICC 配置文件、浏览器支持等。

但是，它在某种程度上是可行的——使用上面的代码预先为这个标志去掉完全白色的像素:

var img = new Image();
img.crossOrigin = "";
img.onload = process;
img.src = "http://i.imgur.com/HIhnb4A.png";        // load the logo
function process() {
  var canvas = document.querySelector("canvas"),   // canvas
      ctx = canvas.getContext("2d"),               // context
      w = this.width, h = this.height,
      idata, data32, len, i, px;                   // iterator, pixel etc.
  canvas.width = w;                                // set canvas size
  canvas.height = h;
  ctx.drawImage(this, 0, 0);                       // draw in image
  
  idata = ctx.getImageData(0, 0, w, h);            // get imagedata
  data32 = new Uint32Array(idata.data.buffer);     // use uint32 view for speed
  len = data32.length;
  
  for(i = 0; i < len; i++) {
    px = data32[i];                                // pixel

    // is white? then knock it out
    if (px === 0xffffffff) data32[i] = px = 0;
    
    // extract alpha channel from a pixel
    px = px & 0xff000000;                          // little-endian: ABGR
    
    // any non-transparency? ie. alpha > 0
    if (px) {
      data32[i] = px | 0xffffff;    // set this pixel to white, keep alpha level
    }
  }
  
  ctx.putImageData(idata, 0, 0);
}

body {background:gold}

<canvas></canvas>