Trims the surrounding transparent pixels from a canvas

trim-canvas.js

// MIT http://rem.mit-license.org

function trim(c) {
  var ctx = c.getContext('2d'),
    copy = document.createElement('canvas').getContext('2d'),
    pixels = ctx.getImageData(0, 0, c.width, c.height),
    l = pixels.data.length,
    i,
    bound = {
      top: null,
      left: null,
      right: null,
      bottom: null
    },
    x, y;

  for (i = 0; i < l; i += 4) {
    if (pixels.data[i+3] !== 0) {
      x = (i / 4) % c.width;
      y = ~~((i / 4) / c.width);
  
      if (bound.top === null) {
        bound.top = y;
      }
      
      if (bound.left === null) {
        bound.left = x; 
      } else if (x < bound.left) {
        bound.left = x;
      }
      
      if (bound.right === null) {
        bound.right = x; 
      } else if (bound.right < x) {
        bound.right = x;
      }
      
      if (bound.bottom === null) {
        bound.bottom = y;
      } else if (bound.bottom < y) {
        bound.bottom = y;
      }
    }
  }
    
  var trimHeight = bound.bottom - bound.top,
      trimWidth = bound.right - bound.left,
      trimmed = ctx.getImageData(bound.left, bound.top, trimWidth, trimHeight);
  
  copy.canvas.width = trimWidth;
  copy.canvas.height = trimHeight;
  copy.putImageData(trimmed, 0, 0);
  
  // open new window with trimmed image:
  return copy.canvas;
}

Also, this crops one pixel too much on the right and bottom. You need to add one to bounds.bottom and bounds.right (or to trimWidth and trimHeight).

I created my own with some optimizations to minimize the number of pixels examined:

https://gist.github.com/timdown/021d9c8f2aabc7092df564996f5afbbf

Thank you very much !

Is it possible to modify this to trim white pixels also?

I'm with @TomFranssen
Anyone have a modification that can trim all consistent pixels? (eg. like Photoshop's trim feature).

Thanks for sharing code.
Your solution and this solution https://github.com/szimek/signature_pad/issues/49#issuecomment-260976909 have the same result.
but I don't know why they don't work with a small canvas.
I receive a cropped base64 string like this data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJoAAACwCAYAAAD3yHdHAAAWqklEQ…R2XRtoY4vDik3+K4DY27CgyngC092SXi3pl3sR9BxnnAL/C1ghAjtx4zZSAAAAAElFTkSuQmCC.
It does not display since it is broken.

its not working on ipad. can someone help us urgently.

var trimHeight = bound.bottom - bound.top,
trimWidth = bound.right - bound.left,
SHOULD BE:
var trimHeight = bound.bottom - bound.top + 1,
trimWidth = bound.right - bound.left + 1,

I created my own with some optimizations to minimize the number of pixels examined:

https://gist.github.com/timdown/021d9c8f2aabc7092df564996f5afbbf

This function is almost 300% faster.