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

Question

我正在用相机拍摄一张照片如下：

<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 进行了测试，并且工作正常。有人知道这是怎么回事吗？

Answer 1

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

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

Assigning result from createObjectURL to image fails to load resource on mobile Safari

html

javascript

mobile-safari