search

evanw / thumbhash

A very compact representation of an image placeholder
https://evanw.github.io/thumbhash/
MIT License
3.49k stars 69 forks source link

is it possible to do on <canvas /> direct? #10

Closed aboveyunhai closed 1 year ago

aboveyunhai commented 1 year ago

I think it's possible to do it on canvas via

 <canvas /> => convert canvas data to image 
   => hash image => get the blur placeholder.

but is it possible

 <canvas /> => hash canvas => get the blur placeholder.
jwagner commented 1 year ago

You can get the RGBA contents of a Canvas via getImageData(). That can then be passed directly to thumbhash.

https://github.com/evanw/thumbhash/blob/5c56a42dacf1f5a1792d71087eeabc53937ce10b/index.html#L472

aboveyunhai commented 1 year ago

You can get the RGBA contents of a Canvas via getImageData(). That can then be passed directly to thumbhash.

https://github.com/evanw/thumbhash/blob/5c56a42dacf1f5a1792d71087eeabc53937ce10b/index.html#L472

oh thx for the file link, it looks like <canvas /> is more a native element for the hash. I was originally think it's canvas -> img, but it's actually the opposite.