agilgur5 / trim-canvas Goto Github PK

View Code? Open in Web Editor NEW

61.0 5.0 6.0 23 KB

A tiny (< 100 LoC) library for trimming whitespace from a canvas element with no dependencies

Home Page: https://agilgur5.github.io/react-signature-canvas/

License: Other

JavaScript 100.00%

trim canvas whitespace remove blanks signature

trim-canvas's Introduction

trim-canvas

A tiny (< 100 LoC) library for trimming whitespace from a canvas element with no dependencies.

Installation

npm i -S trim-canvas

Usage

import trimCanvas from 'trim-canvas'

const canvas = document.createElement('canvas')

// do some drawing on it ...

trimCanvas(canvas)
// now the whitespace has been trimmed

If you don't want to mess with your existing canvas, then simply clone the canvas element beforehand.

trim-canvas returns the canvas element for easy chaining.

Example

Can see how trim-canvas is used inside of react-signature-canvas here. It includes a step for cloning the canvas.

Demo

You can see a demo of trim-canvas here.

(N.B. this is the demo for react-signature-canvas which depends on trim-canvas)

Credits

Credits go to @efc for writing a quick version of this in this issue and to the original StackOverflow Answer that was credited in that issue.

trim-canvas's People

Contributors

Stargazers

Watchers

Forkers

un33k newsning dannychi iq-scm sdtm1016 ming2xiao

trim-canvas's Issues

Support for other colors?

Potential downstream request from agilgur5/react-signature-canvas#22

The trimCanvas function would have to accept a second argument for the color and default to transparency detection. Since this hasn't really come up in 2 years and there are alternative ways to achieve the behavior wanted in that issue, I'm not sure that it's worth the added complexity, but I'll document my thoughts here.

In order to be backwards-compatible, the second argument would have to be able to accept wildcards, since right now the function only checks the RGBA alpha transparency if it's not 0 and doesn't even check any of the other RGB parts.

The backwards-compatible wildcard requirement also means one couldn't necessarily just use color-rgba to parse the second argument, unless the default behavior was just kept as different from the arg behavior (as there is no color equivalent to the current check of rgba(*,*,*,0)).

color-rgba is also much larger than this library so that would make an extremely significant size increase, clashing with the existing image of "tiny (< 100 LoC)". Could accept only 'rgba(r,g,b,a)' strings and do some manual parsing instead, but that wouldn't entirely fulfill the downstream issue as there backgroundColor accepts other types of color strings :/ . That would therefore either be incomplete or end up pushing the dependency downstream.

Thanks thread -- share your thanks here!

I'm using from browser, not Node.js - but it was easy to adjust - and this script works beautifully! Thank you very much.

Small canvas does not display

I use https://github.com/szimek/signature_pad to draw the signature.
At the end of its README, it recommends trim-canvas to remove the empty space in the signature.
when I draw enough big signature, there's no problem with your module. I receive a long base64 string.
But draw a small signature, see attached:
,I only receive a short base64 string that looks like this

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAAAvCAYAAABXPhxsAAAEwUlEQ…IXfsNnrkB0QTFSTLZ+d+XSRKK89XLFfRlE9rnoPa7RKPsfPO7TLMx/kHIAAAAASUVORK5CYII=

This base64 image is broken, it does not display.

How do you guys think about it?
I could notify to the user that "Your signature is too small, try with a bigger one" :))

The following solution also has the same problem as above.
szimek/signature_pad#49 (comment)

Ability to trim specific colour

If I want a canvas with a background colour other than white, the trim-canvas function does not work.

It would be great to specify the colour to be trimmed.

Image quality regression after repeated usage

hi, I used this script in my app,
After erasing ended, all image returns with erased parts removed and then module takes canvas and returns canvas. However if you use it on same bitmap 5-6 times distinguishable quality regression takes place. But its not like pixelating, more like gaussian blur. I tried context.imageSmoothingEnabled = false inside function with no luck.

Add optional arg to duplicate / clone canvas

i.e. trimCanvas(canvas, {duplicate: true}).

Given the intense demand seen by the number of upvotes on szimek/signature_pad#49 (comment) it seems like it should be included by default.

I'm also reading through my own docs for the first time in a while and if you don't know how canvas or cloning works, it may be quite unintuitive.

It's only a handful of lines of code, but IIRC the reason why I didn't include it (or removed it rather) was because it introduced a dependency on canvas, meaning it wouldn't work in Node (requires a pretty massive native dependency). If it's hidden behind an optional flag though, this shouldn't be problematic.
This is something I've been thinking of adding for a while (in my backlog, ofc), but I also happened to see https://github.com/lukechilds/merge-images#nodejs-usage today, which is another interesting workaround for Node usage.