如何使用javascript将图像从PNG转换为JPEG？

我试图从画布上获得图像。PNG图像正常，但JPEG产生了一个问题。我在这里附加了图像。第一个图像是我的画布。接着是PNG，然后是JPEG。所以我想要白色背景的JPEG图像，或者我需要一个在JS中进行PNG到JPEG转换的解决方案

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

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

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

canvas=$（'.jSignature'）[0]；
imgData=canvas.toDataURL（）；
imgDatajpeg=canvas.toDataURL（“image/jpeg”）；
$（“.sigCapHolder”）。追加（“”）
$（“.sigCapHolder”）。追加（“”）

原因 发生这种情况的原因是画布是透明的。不过，透明色是黑色的，带有透明的alpha通道，因此不会显示在屏幕上

另一侧的JPEG不支持alpha通道，因此默认的黑色会从alpha通道中剥离，留下黑色背景

PNG支持alpha通道，因此它与画布的工作方式兼容

解决方案 要解决此问题，您必须在绘制图像之前在画布上手动绘制白色背景：

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

---

这在firefox、oCanvas.toDataURL（“image/jpeg”）

中起作用，向我们展示生成这些图像的代码肯定会有帮助，这是一个透明度问题。在画布上放置一个白色背景矩形。数据=$（'.jSignature'）[0]。getContext（“2d”）；fillRect（0,0,10100）；Data.fillStyle=“白色”；Data.fill（）；我尝试过这个，但仍然只得到相同的问题。如果在任何GUI或web应用程序中使用，它不会显示为黑色。谢谢。我纠正了我的问题。我在绘制后尝试并动态更改。我希望这个答案将对将来的许多人有所帮助。这似乎不起作用，即使我在图像之前绘制，我得到的只是一个白色图像（好像白色矩形在我之后绘制的图像上方）。我应该做一些额外的工作吗？