Как преобразовать изображение из PNG в JPEG с помощью javascript?

Я пытаюсь получить изображение с холста. enter image description here Изображение PNG подходит правильно, но JPEG создает проблему. Я прикрепил изображение здесь. Первое изображение - это мое canvas.Followed PNG, затем JPEG.So я хочу, чтобы мое изображение JPEG с белым фоном, или мне нужно решение для преобразования PNG в JPEG в JS

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

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

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

Ответы

Ответ 1

Причина

Причина этого заключается в том, что холст прозрачен. Однако цвет прозрачности черный с прозрачным альфа-каналом, поэтому он не будет отображаться на экране.

JPEG с другой стороны не поддерживает альфа-канал, так что черный цвет, который по умолчанию лишен своего альфа-канала, оставляет черный фон.

Вы PNG поддерживает альфа-канал, поэтому он совместим с тем, как работает холст.

Решение

Чтобы обойти это, вам придется вручную рисовать на белом фоне на холсте, прежде чем рисовать на изображении:

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

Ответ 2

это работает в firefox, oCanvas.toDataURL( "image/jpeg" )