iOS设备调用toDataURL函数报错：toDataURL is not a function

问题根源 #

1. 代码顺序逻辑错误：你在判断image.complete之后才设置image.src，此时image未加载任何内容，complete永远为false，导致后续尺寸计算逻辑完全无法执行。
2. iOS环境类型兼容问题：尽管loadImage配置了canvas: true，但iOS环境下可能存在回调参数类型不一致的情况，或是异步加载处理不当，导致调用toDataURL时触发类型错误。

修复方案 #

1. 改用onload事件处理图片异步加载 #

放弃image.complete的判断方式，通过image.onload监听图片加载完成事件，确保尺寸计算等核心逻辑在图片加载完成后执行。

2. 显式校验Canvas实例类型 #

在回调中确认返回的img是Canvas元素，避免iOS环境下可能出现的类型不匹配问题，同时优化异步流程的错误处理。

修改后的代码 #

_drawImage(img) {
    this.setState({ isGenerating: true });
    if (!img) return;

    fetch(img)
        .then(r => r.blob())
        .then(blob => {
            loadImage(
                blob,
                (loadedImg) => {
                    if (loadedImg.type === "error") {
                        this.setState({ error: true, isGenerating: false });
                        return;
                    }

                    // 明确校验是否为Canvas实例
                    if (!(loadedImg instanceof HTMLCanvasElement)) {
                        this.setState({ error: true, isGenerating: false });
                        return;
                    }

                    const image = new window.Image();
                    const height = this.props.height;
                    const width = this.props.width;

                    // 监听图片加载完成后执行逻辑
                    image.onload = () => {
                        let offsetX, offsetY;
                        let renderableWidth = image.width;
                        let renderableHeight = image.height;
                        const imageDimensionRatio = image.width / image.height;
                        const canvasDimensionRatio = width / height;

                        if (imageDimensionRatio < canvasDimensionRatio) {
                            renderableHeight = height;
                            renderableWidth = image.width * (renderableHeight / image.height);
                            offsetX = (width - renderableWidth) / 2;
                            offsetY = 0;
                        } else if (imageDimensionRatio > canvasDimensionRatio) {
                            renderableWidth = width;
                            renderableHeight = image.height * (renderableWidth / image.width);
                            offsetX = 0;
                            offsetY = (height - renderableHeight) / 2;
                        } else {
                            renderableHeight = height;
                            renderableWidth = width;
                            offsetX = 0;
                            offsetY = 0;
                        }

                        this.setState({
                            image: image,
                            renderableHeight,
                            renderableWidth,
                            imgHeight: image.height,
                            imgWidth: image.width,
                            offsetX,
                            offsetY,
                            height,
                            width,
                            isGenerating: false
                        });
                    };

                    // 设置图片源，触发onload事件
                    image.src = loadedImg.toDataURL('image/jpeg');
                },
                {
                    orientation: true,
                    canvas: true,
                }
            );
        })
        .catch(err => {
            this.setState({ error: true, isGenerating: false });
        });
}

额外优化说明 #

• 新增fetch和loadImage的错误捕获，避免未处理的Promise异常；
• 提前判断img是否为空，减少无效逻辑执行；
• 统一isGenerating状态更新时机，避免出现状态不一致的情况。

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