我正在尝试从 Canvas 中获取图像。 PNG 图像正常,但 JPEG 产生问题。我在这里附上图片。第一张图片是我的 Canvas 。接着是 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 是透明的。然而,透明颜色是黑色,带有透明的 alpha channel ,因此它不会显示在屏幕上。
另一面的 JPEG 不支持 alpha channel ,因此默认的黑色会从其 alpha channel 中剥离,留下黑色背景。
您的 PNG 支持 alpha channel ,因此它与 Canvas 的工作方式兼容。
解决方案
要解决此问题,您必须在绘制图像之前在 Canvas 上手动绘制白色背景:
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
关于javascript - 如何使用 javascript 将图像从 PNG 转换为 JPEG?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20744628/