javascript – CanvasRenderingContext2D.drawImage on Apple with fractional scale leads to blurry photographs

Our software permits customers to tug & drop or choose photographs to add by way of any browser. The pictures are resized if bigger than 960×720 and transformed to JPEG at 80% high quality. Our take a look at picture is a photograph taken from an iPhone in JPEG format at 4032×3024 pixels at a file measurement of 5.58 MB.
On any home windows PC utilizing any browser, this photograph is resized to 171 KB (176,045 bytes), and pretty sharp and crisp.

On any Apple iOS v15/v16 system or Mac system, utilizing ANY browser, this photograph is resized to 198 KB (203,635 bytes) and BLURRY.

We have examined from iPad Air, iPhone v15, iPhone v16, iPad Professional, MacBook… utilizing Firefox, Chrome and Safari. The picture is resized EXACTLY the identical each time… 198 KB and BLURRY.

The retina show and devicePixelRatio are irrelevant because the canvas just isn’t a part of the DOM and by no means displayed. That is merely an absolute pixel resize from 4032×3024 to 960×720. This seems to be dealt with on the OS stage and never throughout the browser.

All photographs end in a ultimate 960×720 pixel picture at 96 dpi, which is the specified end result. Each are JPEG. Solely the Apple resizing algorithm is horrific. And right here I believed Apple prided themselves on picture rendering.

If scaling the picture by an integral ratio, the picture is crisp on Apple methods. So, decreasing the picture from 4032×3024 to 1008×756 (an ideal 4x multiplier) yields a pointy picture. However 4032×3024 to 960×720 is a 4.2 ratio, and leads to a blurry picture on Apple, whereas Home windows leads to a reasonably crisp picture.

The code is as easy and easy as doable. Has anybody run into this? Does anybody have an answer to make photographs resize on iOS as sharp and crisp as on Home windows? Is Apple conscious that their picture scaling algorithm is horrific?

perform ResizeImage( picture )
{
    var width     = 960;
    var peak    = 720;
    var canvas    = doc.createElement( 'canvas' );

    canvas.width  = width;
    canvas.peak = peak;

    var context   = canvas.getContext( '2nd' );

    context.imageSmoothingQuality = 'excessive';

    context.drawImage( picture, 0, 0 );

    return canvas.toDataURL( 'picture/jpeg', .8 );
}