html-to-image 项目在 iOS 13 上 PNG 预览问题的解决方案

问题背景

在使用 html-to-image 库将 HTML 元素转换为图像时，开发者发现在 iOS 13 系统的 iPhone 设备上存在一个特殊问题。当用户点击下载按钮后，系统会弹出"查看"或"下载"选项。如果选择"查看"选项，预期应该显示 PNG 图像的预览，但实际上却显示为空白页面。

问题分析

这个问题的根源在于 iOS 13 系统对 Blob 对象的处理方式存在特殊性。当 html-to-image 生成的 Blob 对象被直接用于创建对象 URL 时，iOS 13 的预览功能无法正确渲染图像内容。这可能是由于 iOS 13 的 WebKit 引擎在处理某些类型的 Blob URL 时存在兼容性问题。

解决方案探索

经过实践验证，开发者发现了两种有效的解决方案：

方案一：单次调用 toBlob

第一种解决方案是直接使用 toBlob 方法生成 Blob 对象，然后创建下载链接：

const handleClickDownload = () => {   
  toBlob(element)
    .then(function (blob) {
      const link = document.createElement('a');
      const url = window.URL.createObjectURL(blob as Blob);
      link.href = url;
      link.download = `filename.png`;
      link.click();
    });
};

方案二：双重调用 toBlob（更可靠）

第二种方案更为可靠，它通过两次调用 toBlob 方法来解决 iOS 13 的兼容性问题：

const handleClickDownload = async () => {
  if (element) {
    const blob = await Promise.all([
      toBlob(element, { pixelRatio: 4 }),
      toBlob(element, { pixelRatio: 4 })
    ]).then((res) => res[1] as Blob);

    const url = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = `filename.png`;
    link.click();
  }
};

技术原理

双重调用 toBlob 方法之所以有效，可能是因为：

1. 第一次调用初始化了必要的渲染环境
2. 第二次调用确保了 Blob 数据的完整性
3. iOS 13 可能需要额外的处理时间来准备图像数据

这种方法不仅解决了预览空白的问题，还确保了下载功能的正常使用。参数 pixelRatio: 4 可以生成更高分辨率的图像，适合 Retina 显示屏。

最佳实践建议

1. 对于需要支持 iOS 13 的应用，推荐使用双重调用的方案
2. 可以添加设备检测逻辑，仅对 iOS 13 设备使用特殊处理
3. 考虑添加加载状态提示，因为双重调用会增加处理时间
4. 对于重要功能，建议在实际设备上进行充分测试

总结

html-to-image 库在 iOS 13 上的 PNG 预览问题是一个典型的平台兼容性问题。通过双重调用 toBlob 方法的解决方案，开发者可以确保图像在 iOS 13 设备上既能正常预览也能正确下载。这个案例也提醒我们，在跨平台开发时需要特别注意不同系统和浏览器版本的特殊行为。