Export canvas as PNG without transparency (alpha channel)

Question

** EDIT ** I have to export a big canvas (5Mo < my_export < 40Mo) and POST it with ajax. I have to POST it using the fewer Content-Length bytes.

When I export my canvas (with toDataUrl), it always return me a base64 representation of a .png file with an alpha channel. Alpha channel weight is about 25% of image's data and I don't need it.

Suggested answer :

PNG compression is good. If the alpha channel is flat (all the same value) then it will not take up much space. Even with fully opaque alpha channel, the (compressed) .png file is larger. (about +10% on a few tests).
You should fill the canvas (using the color you want for the background) before drawing on it. I already founded this solution on stackoverflow but it seems it doesnt works
Base64 encode add 34% more bytes. Already solved. Using this solution : convert-data-uri-to-file-then-append-to-formdata (A Uint8Array into a Blob into a FormData)

Is there a way to export my canvas as .png but without alpha channel ? If "no", is there a way (lib) in javascript to trim alpha channel ? Export as .jpeg is not a solution, I need a .png file.

Thanks ! : )

I'll only post this as a comment, as I'm not a 100% certain, but I'd say don't hold your breath. I checked as far as I could on MDN and there's no indication of such an option. You could try using `getImageData()`, extracting the color values to a new `ArrayBuffer` and then compressing that with a client-side library (NPM might have something useful). I have no idea what size that would yield compared to an actual .png compression, though considering that data URL's are base64 encoded, which is always larger than its binary form, it might be comparable, or even better, at such sizes as yours. — Máté Safranka, May 25 '18 at 13:11
Obviously, though, in this case the backend would have to be prepared to receive the image in this nonstandard format. — Máté Safranka, May 25 '18 at 13:13
I didn't try this solution yet. I hope to find another solution than parsing the whole png file, extract RGB value and then re-create a png without alpha channel — LeoLolCat, Jun 04 '18 at 15:24

score 4 · Answer 1 · answered May 25 '18 at 16:08

PNG compression is good. If the alpha channel is flat (all the same value) then it will not take up much space.

You can fill in the transparent and semi transparent pixels using composite operation "destination-over".

The following function will set all pixels alpha value to 1.

function fillAlpha(ctx, bgColor){  // bgColor is a valid CSS color ctx is 2d context
   // save state
   ctx.save();
   // make sure defaults are set
   ctx.globalAlpha = 1;
   ctx.setTransform(1, 0, 0, 1, 0, 0);
   ctx.filter = "none";

   // fill transparent pixels with bgColor
   ctx.globalCompositeOperation = "destination-over";
   ctx.fillStyle = bgColor;
   ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

   // cleanup
   ctx.restore();
}

You can then save the image as PNG with the Alpha channel as small as possible.

score 2 · Answer 2 · answered Jan 07 '19 at 04:35

My goal is similar to yours: exporting a canvas in PNG format, and removing the alpha channel information from its dataURL representation before sending it to a server. My reasons are different from yours, however. I wanted to combine the resulting image files as a PDF at the other end, and the library I was using img2pdf couldn't handle alpha channel information. The library I was using for the canvas was fabric.js, but the problem should arise when exporting any HTML5 canvas via toDataUrl().

Fortunately, there is a nice javascript library called pngjs which can manipulate PNG files in JavaScript. It comes with asynchronous and synchronous routines. This is how I converted dataURLs from Alpha to non-Alpha. Your step 3 (dataURL to Blog) should be enough to finish the job.

let PNG = require('pngjs').PNG;

/* thehref: DataURL form of a png file. */
function removeAlphaFromDataUrl(thehref) {
  let dataurlstring = "data:image/png;base64,"
  let buff = new Buffer(thehref.slice(22), 'base64')
  let png = PNG.sync.read(buff);
  let options = { colorType: 2 };
  let buffer = PNG.sync.write(png, options);
  let output = buffer.toString('base64');
  let newhref = dataurlstring + output
  return newhref;
}

I hope this helps.

score 0 · Answer 3 · answered May 25 '18 at 14:34

0

You should fill the canvas (using the color you want for the background) before drawing on it.

For example, before:

var ctx = canvas.getContext('2d');
drawEverythingOnMyContext(ctx);
image = canvas.toDataURL();

After:

var ctx = canvas.getContext('2d');
// draw a background
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// draw then
drawEverythingOnMyContext(ctx);
image = canvas.toDataURL();

answered May 25 '18 at 14:34

Dmitriy Miroshnichenko

56
2

I already found this solution on stackoverflow, but it seems it doesn't work : / – LeoLolCat Jun 04 '18 at 15:21

score 0 · Answer 4 · answered May 26 '18 at 01:38

When I export my canvas (with toDataUrl), it always return me a .png file with an alpha channel.

No it doesn't return a ".png file", toDataURL returns a data URL which is is a string made of a header and of a base64 representation of your file. This base64 representation will itself take 34% more bytes than the represented binary file.

So to fix the X of your XY problem send your png image as a binary Blob..

Now to provide some content about the Y question, I didn't checked in every browsers, but I don't think any has implemented anything else than 32bits png output. This might change in the future, moreover since most of UAs now support the {alpha: false} 2d context parameter, and that we will also probavly have more control on the bit-depth in use on the context in an hopefully near-future.

But for the time being, you would have to do it yourself, by running your own png encoder.

Export canvas as PNG without transparency (alpha channel)

4 Answers4