将 createObjectURL 的结果分配给图像无法在移动 Safari 上加载资源

Posted 2023-03-14

【中文标题】将 createObjectURL 的结果分配给图像无法在移动 Safari 上加载资源

【英文标题】：Assigning result from createObjectURL to image fails to load resource on mobile Safari

【发布时间】：2018-06-25 14:04:46

【问题描述】：

我正在从相机中捕捉如下图片：

<input type="file" accept="image/*" capture="camera">

我绑定到输入的更改事件。

var input = document.querySelector('input');
input.addEventListener('change',  processFile);

当一张图片被制作（或从库中选择）时，processFile 函数被调用：

processFile = function (e) 
    var imageUrl = URL.createObjectURL(e.target.files[0]);
    var image = new Image();
    image.src = imageUrl;

这适用于大多数浏览器，但在移动 Safari (10.1) 上我得到以下异常：

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (blob:https://example.com/29ce6a7c-c266-4b39-8de2-9ec61cc38455, line 0)

我调试过，当我将 imageUrl (blob:) 分配给 img 对象的 src 属性时出错了。

我也在一个小代码笔中复制了这个：

https://codepen.io/geersch/pen/rKrwEN

对我来说，仅在 ios 10.1 上失败。还使用 iOS 10.3.2 进行了测试，并且运行良好。有谁知道怎么回事？

【参考方案1】：

原来有问题的 iPad 设备在 iOS 10.1 beta 1 上运行，这很可能是问题的原因。