[英]how to convert multiple div into image (png/jpeg) using php and javascript?
[英]How to convert a image from PNG to JPEG using javascript?
我正在尝试从画布中获取图像。 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+' /> ')
发生这种情况的原因是画布是透明的。 然而,透明颜色是黑色的,带有透明的 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
作为另一种方式,使用包将透明图像的黑色背景转换为白色或任何其他基于提供的 HEX 值的其他方法,在我们的
const Jimp = require("jimp");
// Read the PNG file and convert it to editable format
Jimp.read("./images/your-image.png", function (err, image) {
if (err) {
// Return if any error
console.log(err);
return;
}
image.background(0xFFFFFFFF, (err, val) => {
// Convert image to JPG and store it to
// './output/' folder with 'out.jpg' name
image.write("./output/out.jpg");
})
});
这适用于火狐,oCanvas.toDataURL("image/jpeg")
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.