I have a canvas, in memory, not part of the DOM, that I write image bytes to. The image size is 1008 x 756 (a 4032x3024 photo reduced to 1/4 size). I then call canvas.toDataUrl('image/jpeg',.8)
to output a JPEG image at 80% quality.
On windows, the resulting file is 204 KB. On Apple (iPhone, iPad, and Mac) the resulting file is over 300 KB. In order to create a file of similar storage size, I need to use a quality value of .528 on Apple to match a .8 value on Windows. And for .9 on Windows, a value of .648 is required on Apple.
I would have thought that all JPEG libraries would be standard across all platforms and that the "quality" value would be standard across platforms and browsers and in all implementations.
Has anyone else run into this issue? Does anyone have an equation to match qualities across platforms or alternative solution?
function ConvertImageToJPEG( image )
{
var width = 1008;
var height = 756;
var canvas = document.createElement( 'canvas' );
canvas.width = width;
canvas.height = height;
var context = canvas.getContext( '2d' );
context.drawImage( image, 0, 0 );
return canvas.toDataURL( 'image/jpeg', .8 );
}