Images from canvas black or transparent: img.src = canvas.toDataURL(); // FF: 'image/jpeg'=black. Png,webp,default=transparent.
I don't know if this ever worked in FF, since I've been on Chrome a while. I tried canvas.toBlob() in FF without a solution. The behavior is the same whether the served … (read more)
I don't know if this ever worked in FF, since I've been on Chrome a while. I tried canvas.toBlob() in FF without a solution.
The behavior is the same whether the served image is jpg or webp. A Servlet delivers the image data, here in webp:
response.setHeader("Content-Type", "image/webp");
On page, I use a canvas thus => see '// FIREFOX'
var canvas = document.createElement( 'canvas' );
canvas.width = width;
canvas.height = avail_height;
var context = canvas.getContext( '2d' );
context.drawImage( imgsrc, 0, 0, width, avail_height);
context.lineWidth = 150;
// FIREFOX: canvas.toDataURL('image/jpeg')=black, png,webp,default=transparent
img.src = canvas.toDataURL('image/jpeg');
img.onmousedown = disableDragging; // for FF
img.style.opacity = "1.0";
console.log('setImg ok');
Inspecting a black jpeg:
data:image/jpeg;base64,...
Thanks!