Search code examples
javascripthtmlcanvasimage-resizingtodataurl

Canvas toDataURL without alpha channel

I'd like to resize uploaded images in browser. I am using canvas to draw the uploaded image to canvas and then resize it, and use the result from toDataURL method.

Simplified code (without upload parts) looks something like this:

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d', { alpha: false} );
// img src contains data url of uploaded image
ctx.drawImage(img, 0, 0, imgWidth, imgHeight); 
var dataUrl = canvas.toDataURL('image/png');

The problem is dataUrl contains alpha channel, although context was created with alpha set to false.

Is it possible to get data url without the alpha channel?

If not, I considered using one of Javascript image libraries, but most of them rely on canvas.

Also, I could encode the image using data in canvas, but I'd rather not do that :)

Solution

  • alpha:false is only used in WebGL. It's ignored when creating a 2d context.

    But you can export the canvas in jpg format where your unwanted alpha is eliminated:

    // export a full-quality jpg dataUrl

canvas.toDataURL("image/jpeg", 1.0);