JPG file loaded into the node canvas module loses quality after operations and export

429 views Asked by At

I am using the node canvas implementation https://github.com/Automattic/node-canvas

I use it to cut a jpg export of a newsletter design into slices and generate an image based HTML template that is email friendly. Essentially it's just slices from the source at around 550px based on my emailing requirements.

The problem is that when I load the source jpg file, I see some loss in the exported slices. Here is an example:

Source vs exported example

As you can see the version on the right (the source - jpg) is somewhat crisper and has better quality than what the node canvas has processed.

I'm already using the export jpg at full quality in all my toDataUrl calls, as opposed to the 0.92 in the spec. I am using the loadImage function that node canvas provides, would it be possible to lose quality there?

this.writeImage(canvas.toDataURL('image/jpeg', 1.0), i);

Additionaly, I already beefed up the quality settings on the context:

    ctx.patternQuality = 'best';
    ctx.quality = 'best';
    ctx.antialias = 'subpixel';
    ctx.imageSmoothingEnabled = false

I'm thinking maybe I didn't use those settings above correctly? Or perhaps, missed one?

One of the ideas flying around is to blow up the source at 2x, and then resize when processing, in order to maintain the original jpeg quality.

My question is, what can I do to prevent any loss of quality when processing? It doesn't make sense to get a lower quality image at the end of the process with all the steps applied, and yet...

Thank you very much, Dragos.

Later edit:

I'm actually asking the question wrong, the source I'm using is actually PNG, exactly because I wanted big quality in my jpeg exports. Exports will clearly not be as good as the original PNG, but I obtained the source in JPG form and still it had losses vs the potential JPG I might use, but technically I'm cutting from a PNG.

0

There are 0 answers