我试图从画布中获取图像. PNG图像正确到位,但JPEG正在产生问题.我附上图片在这里.第一张图片是我的画布.随着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+' /> ')
解决方法
原因
这样做的原因是画布是透明的.然而,透明度为黑色的透明Alpha通道,因此它不会显示在屏幕上.
另一边的JPEG不支持Alpha通道,因此默认的黑色将被剥去其alpha通道留下黑色背景.
你PNG支持alpha通道,因此它与canvas的工作方式兼容.
解
为了解决这个问题,您必须在绘制图像之前在画布上手动绘制白色背景：
var canvas = $('.jSignature')[0];
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#fff'; /// set white fill style
ctx.fillRect(0,canvas.width,canvas.height);
/// draw image and then use toDataURL() here