根据内容自动裁剪 HTML5 画布

Question

假设这是我的画布，上面画着一张邪恶的脸。我想使用 toDataURL() 将我的邪恶面孔导出为 PNG；然而，整个画布都被栅格化了，包括邪恶面孔和画布边缘之间的“空白”。

 +---------------+
|               |
|               |
|     (.Y. )    |
|      /_       |
|     ____/    |
|               |
|               |
+---------------+

将我的画布裁剪/修剪/收缩到其内容的最佳方法是什么，所以我的 PNG 不大于面部的“边界框”，如下所示？最好的方法似乎是缩放画布，但假设内容是动态的……？我确信应该有一个简单的解决方案，但它正在逃避我，大量谷歌搜索。

 +------+
|(.Y. )|
| /_   |
|____/|
+------+

谢谢！

原文由 c24w 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

编辑（见 评论）

 function cropImageFromCanvas(ctx) {
  var canvas = ctx.canvas,
    w = canvas.width, h = canvas.height,
    pix = {x:[], y:[]},
    imageData = ctx.getImageData(0,0,canvas.width,canvas.height),
    x, y, index;

  for (y = 0; y < h; y++) {
    for (x = 0; x < w; x++) {
      index = (y * w + x) * 4;
      if (imageData.data[index+3] > 0) {
        pix.x.push(x);
        pix.y.push(y);
      }
    }
  }
  pix.x.sort(function(a,b){return a-b});
  pix.y.sort(function(a,b){return a-b});
  var n = pix.x.length-1;

  w = 1 + pix.x[n] - pix.x[0];
  h = 1 + pix.y[n] - pix.y[0];
  var cut = ctx.getImageData(pix.x[0], pix.y[0], w, h);

  canvas.width = w;
  canvas.height = h;
  ctx.putImageData(cut, 0, 0);

  var image = canvas.toDataURL();
}

原文由 potomek 发布，翻译遵循 CC BY-SA 4.0 许可协议