Search code examples
javascriptarrayshtmlblobpixel

Save Raw Pixel Data to BLOB/File

I'm trying to make a custom web 2 print app using HTML5 canvas. What I've learned from my research is that no matter what toDataURL for canvases cannot output hi-res files (only 72-96dpi), so what I am trying to do is obtain raw pixel data from a canvas that is 300px x 300px.

The idea is to have a 1 inch by 1 inch square because the target DPI is 300. Later I would go on to modify the canvas size in pixels for different printed materials.

I'm using getImageData and trying to pass that data into a Blob, which can be saved as a file.

Here is what I have so far using JSFiddle

If you could please point out what I'm missing I'd appreciate it. The Blob being generated is invalid/corrupt for some reason.

Solution

  • https://github.com/vigata/petitoJPEG was the answer. It's a perfect client-side JPG encoder. :)