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;
}

Great code, just what I needed! The only thing I changed was that bound.bottom and bound.right both need incrementing by one after the loop, or the bottom-most and right-most rows of pixels get trimmed off.

Awesome, thanks for that

Hello remy, just wondering if is possible to add an example.
Thank you for the code.

thanks a lot! Great

Hello Remy, your tool seems to be what I am looking for. great I hv been spending my wknd browsing over many sites.
however, i'm very new in html/js ...
may I you to add some more lines to make it a full concrete example with an image file that I could copy/past and make work. then, I will adapt to my need ? sorry for this request but it's necessary for me to get started. thk you very much in avance. Eric

Using this in a school project. Thank you very much

Awesome, just too much guy ;-)

@joloco Any chance you have your code for this, so many years later?

Man this saves my life, thanks!

Thank you very much !

Wooh, awesome!
Working with konvajs, I use it like this:

window.open(trim(layer.children[77].toCanvas()).toDataURL());

This isn't working for me, it is only trimming 1px on each dimension.

Thanks a lot.

Awesome and intelligent code! I just modified it to add padding to the image cropped.

Thanks, just what I needed. One tiny improvement: you could use the original canvas element's ownerDocument rather than document to create the copy so that they both exist in the same document. This could be important if your canvas comes from an iframe which has different fonts loaded to the main document and you want to draw text on the trimmed canvas (which happens to be exactly what I want to do).

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.