如何用纯JavaScript实现iOS端HTML5 Canvas图片下载？

我完全懂你的困扰——iOS端处理Canvas图片保存确实有一堆坑，尤其是老版本系统和Safari的限制。你之前尝试的方法里有几个关键错误，我来帮你修正并给出可行的方案：

先理清核心错误点 #

1. btoa(blob)和btoa(canvas)完全无效：btoa()只能处理纯字符串，直接传Blob或Canvas元素会把它们转成[object Blob]/[object HTMLCanvasElement]这类无效字符串，所以生成的base64自然会显示破损图片。
2. iOS Safari不支持download属性：普通浏览器用a标签加download可以直接触发下载，但iOS Safari不认这个属性，必须换思路。
3. 老版本iOS Safari缺失canvas.toBlob()：你遇到的canvas.toBlob() is not a function就是这个原因，得先加兼容补丁。

修正后的完整代码 #

首先添加toBlob的兼容补丁，解决老版本iOS的支持问题：

// Polyfill for canvas.toBlob() (适配iOS Safari及旧浏览器)
if (!HTMLCanvasElement.prototype.toBlob) {
  Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
    value: function(callback, type, quality) {
      const dataURL = this.toDataURL(type, quality).split(',')[1];
      setTimeout(() => {
        const binStr = atob(dataURL);
        const arr = new Uint8Array(binStr.length);
        for (let i = 0; i < binStr.length; i++) {
          arr[i] = binStr.charCodeAt(i);
        }
        callback(new Blob([arr], { type: type || 'image/png' }));
      });
    }
  });
}

然后是修改后的保存函数：

function isIOS() {
  return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
}

function fileSave() {
    const canvas = document.getElementById('cSave');
    let format = "image/png";
    let quality = 1.0;
    let name = "new_image.png";

    // 处理格式选择逻辑
    if (document.getElementById("jpg").checked) {
        format = "image/jpeg";
        quality = Number(document.getElementById("quality").value) / 100;
        name = "new_image.jpg";
    }

    // iOS专属保存逻辑
    if (isIOS()) {
        // 直接用toDataURL生成有效图片链接
        const dataURL = canvas.toDataURL(format, quality);
        // 打开新窗口显示图片，引导用户长按保存
        const saveWindow = window.open();
        saveWindow.document.write(`
            <!DOCTYPE html>
            <html>
            <head>
                <title>${name}</title>
                <style>body { margin: 20px; text-align: center; }</style>
            </head>
            <body>
                <img src="${dataURL}" style="max-width: 100%; max-height: 80vh;" alt="编辑后的图片">
                <p>长按图片即可保存到设备</p>
            </body>
            </html>
        `);
        saveWindow.document.close();
        return;
    }

    // 非iOS浏览器用Blob下载方案
    canvas.toBlob(blob => {
        const anchor = document.createElement('a');
        const url = URL.createObjectURL(blob);
        anchor.href = url;
        anchor.download = name;
        document.body.appendChild(anchor);
        anchor.click();
        document.body.removeChild(anchor);
        URL.revokeObjectURL(url);
    }, format, quality);
}

关键说明 #

• iOS端的保存逻辑：因为Safari不支持自动下载，我们把图片放到新窗口里，引导用户长按图片——这是iOS上最稳定的保存方式，从iOS 10到最新版本都适用。你之前没看到系统对话框是正常的，iOS本身就没有自动弹出保存的对话框，必须用户手动长按操作。
• 规避Chrome的data URL限制：我们没有直接把data URL作为a标签的href跳转，而是在新窗口里插入img标签，完美绕过了Chrome的限制。
• 跨域图片注意事项：如果你的Canvas里用了跨域图片，必须给图片设置crossOrigin="anonymous"，否则toDataURL会报错，导致无法生成图片链接。

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