Apple设备CanvasRenderingContext2D.drawImage非整数比例缩放图像模糊问题

• 应用场景：浏览器端支持拖拽/选择图片上传，自动将尺寸超过960x720的图片缩放为960x720像素、80%质量的JPEG格式
• 测试现象：
  • Windows平台任意浏览器：测试图（iPhone拍摄的4032x3024、5.58MB JPEG）缩放后为171KB，画质清晰锐利
  • iOS 15/16、Mac平台任意浏览器（Firefox、Chrome、Safari）：同款测试图缩放后为198KB，画质模糊，覆盖iPad Air、iPhone 15/16、iPad Pro、MacBook等设备结果一致
  • 关键细节：canvas未加入DOM，仅做绝对像素缩放，排除视网膜屏、devicePixelRatio影响；整数比例缩放（如4032x3024缩至1008x756，4倍缩放）时Apple设备画质正常，非整数比例（4.2倍缩至960x720）则出现模糊

function ResizeImage( image )
{
    var width     = 960;
    var height    = 720;
    var canvas    = document.createElement( 'canvas' );

    canvas.width  = width;
    canvas.height = height;

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

    context.imageSmoothingQuality = 'high';

    context.drawImage( image, 0, 0 );

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

1. 是否有开发者遇到过相同问题？
2. 有没有方法让iOS/Mac设备上的图像缩放效果和Windows一致？
3. Apple是否知晓其图像缩放算法存在该问题？

针对Apple平台非整数比例缩放模糊的问题，分步缩放是经过验证的有效 workaround——先将原图缩放到接近目标尺寸的整数比例中间尺寸，再缩放到最终的960x720，规避单次非整数缩放的算法缺陷：

function ResizeImage(image) {
    const targetWidth = 960;
    const targetHeight = 720;
    const srcWidth = image.width;
    const srcHeight = image.height;

    // 第一步：缩放到接近目标尺寸的中间整数比例尺寸
    let tempWidth = srcWidth;
    let tempHeight = srcHeight;
    // 每次按1/2比例缩小，直到尺寸接近目标的1.5倍以内
    while (tempWidth > targetWidth * 1.5 || tempHeight > targetHeight * 1.5) {
        tempWidth = Math.floor(tempWidth / 2);
        tempHeight = Math.floor(tempHeight / 2);
    }

    // 临时canvas处理第一步缩放
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = tempWidth;
    tempCanvas.height = tempHeight;
    const tempCtx = tempCanvas.getContext('2d');
    tempCtx.imageSmoothingEnabled = true;
    tempCtx.imageSmoothingQuality = 'high';
    tempCtx.drawImage(image, 0, 0, tempWidth, tempHeight);

    // 第二步：从中间尺寸缩放到目标尺寸
    const finalCanvas = document.createElement('canvas');
    finalCanvas.width = targetWidth;
    finalCanvas.height = targetHeight;
    const finalCtx = finalCanvas.getContext('2d');
    finalCtx.imageSmoothingEnabled = true;
    finalCtx.imageSmoothingQuality = 'high';
    finalCtx.drawImage(tempCanvas, 0, 0, targetWidth, targetHeight);

    return finalCanvas.toDataURL('image/jpeg', 0.8);
}

额外优化点：

• 显式设置imageSmoothingEnabled = true，避免部分浏览器默认值不一致的问题
• 选择2的整数次幂比例做分步缩放，这是Apple底层图像算法更友好的缩放比例

该问题在开发者社区中普遍存在，Apple的Core Graphics（浏览器底层依赖的图像渲染框架）在处理非整数比例的单次缩放时，会出现抗锯齿过度导致模糊的情况，而Windows平台依赖的渲染算法在非整数缩放时表现更稳定。目前无公开信息表明Apple官方已明确承认该问题，但分步缩放的解决方案已被大量开发者验证有效。

内容的提问来源于stack exchange，提问作者1911TRP