iPhone原图上传时canvas.toBlob返回null问题求助

你遇到的是iOS设备（包括iPhone上的Chrome）处理原图尺寸图片裁剪时，canvas.toBlob返回null的问题，核心原因大概率是iOS对Canvas的像素限制、toBlob的实现bug，或者绘制参数的兼容性问题。

1. 限制Canvas总像素不超过iOS阈值 #

iOS设备对Canvas的最大像素总量有严格限制（通常单维度不超过4096，总像素不超过16777216），原图裁剪后的Canvas可能超出了这个限制，而「大尺寸」上传时图片已被压缩，所以能正常处理。

修改代码，在设置Canvas宽高前先判断并缩放：

const getCroppedImg = (image: any, crop: Crop) => {
    const canvas = document.createElement('canvas');
    const pixelRatio = window.devicePixelRatio;
    const scaleX = image.naturalWidth / image.width;
    const scaleY = image.naturalHeight / image.height;
    const ctx = canvas.getContext('2d');

    // 计算目标Canvas尺寸
    let targetWidth = crop.width * pixelRatio * scaleX;
    let targetHeight = crop.height * pixelRatio * scaleY;
    // iOS常见最大总像素限制
    const maxTotalPixels = 16777216;
    let totalPixels = targetWidth * targetHeight;

    // 如果超过限制，按比例缩小
    if (totalPixels > maxTotalPixels) {
        const scaleFactor = Math.sqrt(maxTotalPixels / totalPixels);
        targetWidth *= scaleFactor;
        targetHeight *= scaleFactor;
    }

    canvas.width = targetWidth;
    canvas.height = targetHeight;

    if(ctx == null){
        return Promise.reject(new Error('Failed to get canvas context'));
    }

    ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
    ctx.imageSmoothingQuality = 'high';

    // 调整drawImage参数，适配缩放后的Canvas
    const drawWidth = crop.width * scaleX * (targetWidth / (crop.width * pixelRatio * scaleX));
    const drawHeight = crop.height * scaleY * (targetHeight / (crop.height * pixelRatio * scaleY));

    ctx.drawImage(
        image,
        crop.x * scaleX,
        crop.y * scaleY,
        crop.width * scaleX,
        crop.height * scaleY,
        0,
        0,
        drawWidth,
        drawHeight
    );

    // 后续Promise部分...
}

2. 替换canvas.toBlob为canvas.toDataURL #

iOS上toBlob在处理大尺寸Canvas时存在已知兼容性问题，直接用toDataURL生成base64可以绕过这个问题：

return new Promise((resolve, reject) => {
    try {
        const base64data = canvas.toDataURL('image/jpeg', 0.5);
        resolve(base64data);
    } catch (err) {
        reject(new Error('Failed to generate base64 image'));
        console.error(err);
        alert("Failed to generate image");
    }
});

注意：toDataURL生成的base64字符串会比toBlob转的略大，但功能一致，且兼容性更好。

3. 确保图片完全加载后再绘制 #

iOS上如果图片未完全加载就绘制到Canvas，可能导致Canvas为空。调用getCroppedImg前，确保image的onload事件已触发：

// 示例：上传图片后处理
const handleImageUpload = (file: File) => {
    const img = new Image();
    img.onload = () => {
        // 图片加载完成后再调用裁剪函数
        getCroppedImg(img, cropData).then(base64 => {
            // 处理base64
        });
    };
    img.src = URL.createObjectURL(file);
};

4. 对drawImage参数取整 #

iOS对drawImage的浮点参数支持不佳，可能导致绘制异常，将所有绘制参数转为整数：

ctx.drawImage(
    image,
    Math.round(crop.x * scaleX),
    Math.round(crop.y * scaleY),
    Math.round(crop.width * scaleX),
    Math.round(crop.height * scaleY),
    0,
    0,
    Math.round(crop.width * scaleX),
    Math.round(crop.height * scaleY)
);

5. 限制devicePixelRatio的最大值 #

部分iOS设备的devicePixelRatio为3，会大幅增加Canvas尺寸，限制为2可以减少总像素：

const pixelRatio = Math.min(window.devicePixelRatio, 2);

建议按以下顺序尝试：

1. 先替换toBlob为toDataURL，快速验证是否是toBlob的bug；
2. 再检查Canvas总像素是否超限；
3. 最后调整drawImage参数和devicePixelRatio。

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