Search code examples
javascriptimagecanvas

How to convert a image from PNG to JPEG using javascript?

I am trying to get image from canvas. enter image description herePNG image is coming properly but the JPEG is producing a problem. I attached image here.First image is my canvas.Followed by PNG then JPEG.So i want my JPEG image with white background or i need a solution for PNG to JPEG conversion in JS

canvas =  $('.jSignature')[0];

            imgData = canvas.toDataURL();
            imgDatajpeg = canvas.toDataURL("image/jpeg");                   

            $(".sigCapHolder").append('<img src='+imgData+' /> ')
            $(".sigCapHolder").append('<img src='+imgDatajpeg+' /> ')
Solution

  • Cause

    The reason for this to happen is due to canvas being transparent. However the transparancy color is black with a transparent alpha-channel so it won't show on screen.

    JPEG on the other side doesn't support alpha-channel so that black color which is the default is stripped of its alpha channel leaving a black background.

    You PNG supports alpha-channel so it is compatible with the way canvas work.

    Solution

    To get around this you will have to manually draw in a white background on the canvas before you draw in the image:

    var canvas =  $('.jSignature')[0];
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#fff';  /// set white fill style
ctx.fillRect(0, 0, canvas.width, canvas.height);

/// draw image and then use toDataURL() here