javascript - 文件上传在 Safari 和 Chrome iOS8.1.2 上显示带有空字符串的数据

Question

您好，我们在 IOS 8.1.2 上的 Chrome 和 Safari 上上传文件时遇到问题。一些照片上传显示的数据带有空字符串，其他则显示正常。有人知道解决方法可以使上传的照片一致显示吗？非常感谢。

最初我们认为这是 iOS 8 Safari 上文件上传功能损坏的一个已知问题。 “http://blog.uploadcare.com/you-cannot-upload-files-to-a-server-using-mobile-safari/”。然而，它似乎是 8.0.0 的问题，据说已经修复了。此外，该问题不仅限于 Safari，Chrome iOS 中也会出现。

具体来说，当选择的照片直接从 iPHONE 相机拍摄时，数据显示为空(请参阅登录控制台)

[Log] 对象(controllers.js，第 228 行)src:“数据:”

但是，当选择的照片是屏幕截图或从电子邮件保存的照片时，实际上会显示图像并发送数据

[Log] 对象(controllers.js，第 228 行)src:“数据:图像/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/7QA4UGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAAA4QklNBCUAAAAAABDUHYzZjwCyBOmACZjs+EJ+/8AAEQgGYATIAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAA AABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBh...."

有人遇到过类似的问题吗？为什么它适用于某些照片，但不适用于其他照片？有人知道有什么解决方法可以显示从相机本身拍摄的图像吗？

<小时/>

这里的代码片段:

$scope.getAlbumPicture = function() {
    Camera.getAlbumPicture().then(function(fileURI) {
        $scope.normalisePicture(fileURI, function(dataURL) {
            Local.setTemp(dataURL);
            $state.go('tab.camera-detail');
        });
    }, function(err) {
        console.log(err);
    });
};
$scope.readImage = function(input) {
    if (input.files && input.files[0]) {
        var fileReader = new FileReader();
        fileReader.onloadend = function() {
            $scope.normalisePicture(fileReader.result, function(dataURL) {
                Local.setTemp(dataURL);
                $state.go('tab.camera-detail');
            });
        };
        fileReader.readAsDataURL(input.files[0]);
    }
};

Answer 1

TL;DR 最近我遇到了问题中描述的类似问题，发现 this thread ，这可能是 iPhone 的内存不足问题，除了使用 canvas 元素调整大尺寸图像的大小之外，您无能为力，我使用 1200 作为图像调整大小的最长宽度/高度，然后一切都会恢复正常。

对于任何功能引用，更具体的硬件和软件，我的测试中出现的问题是 iPhone 6 Plus 和 iOS 8.1.2，我尝试对图像执行的过程是:

1. 使用 FileReader.onLoad = func 和 FileReader.readAsDataURL() 将 input[type="file"] 的文件读取为base64 字符串。
2. 将 base64 指定为 new image() 的 src
3. 在image.onload = func内部绘制一个新的canvas的2d context，其宽度和高度与上图相同。
4. 检查一些方向 EXIF 信息，然后旋转 Canvas 。
5. 最后，其他人员使用从 canvas.toDataURL() 生成的新图像的 base64 字符串进行操作。

空的数据:发生在步骤1到步骤2和步骤5之间，随机取决于从`获得的图像的大小输入[类型="file"]。

就我而言，iOS Safari 似乎可以将图像数据分配给具有相同宽度和高度的 canvas ，但如果 Canvas 有 toDataURL 则不行一个非常大的尺寸。但 Safari 无论如何都不会挂起，我可以重新点击 input[type="file"] 来获取下一个文件，因为上一个文件输出的是空的 data:。