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

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