Javascript 图像上载预览旋转（iOS上的Safari）

我正在用ASP.Net/Javascript为一个网站开发一个相当复杂的图像上传功能，在图像预览周围有一个WYSIWYG界面，所有这些都在用户点击上传之前在客户端完成。但我遇到了一个根本性的障碍：在用户开始变换图像之前，我真的不知道他们看到了什么

用于创建预览客户端的Javascript基本上就是这个jQuery位

$('#inputPhotoUploader').change(function () {    
    var image = this.files[0];
    var urlCreator = window.URL || window.webkitURL;
    imageClientURL = urlCreator.createObjectURL(image);

    var previewImage = document.createElement("img");
    previewImage.src = imageClientURL;

    $('#previewContainer').empty();
    $('#previewContainer').append(previewImage);
});

这将根据在#inputPhotoUploader中选择的文件在#previewContainer div中创建一个图像，而用户不会实际上载任何内容。太好了

问题是，该文件通常包含有关旋转的Exif数据。浏览器可能会根据这些数据自动旋转预览图像（至少在我的iPhone上是这样）。可能不会，就像我测试过的所有桌面浏览器一样

最终用户点击upload，我得到了原始文件、Exif数据和所有内容。但我不知道它是如何显示给用户的。也许他们的浏览器忽略了Exif数据，显示了旋转“不正确”的图像，但用户希望它看起来完全是那样，这就是我的软件应该显示它的方式。或者可能是iPhone的快速拍摄，Safari自动旋转它，用户希望它以这种方式显示给其他人，因为预览显示了这一点

创建预览后，我会进行一些其他奇特的图像转换，但这个基本问题仍然存在，浏览器显示了什么？现在，按照我的看法，我需要确定浏览器是否自动旋转预览，或者以某种方式确保没有浏览器自动旋转预览。我只能想出方法来做前者，用丑陋的用户代理

---

有更好的方法吗？

我可以请你分享你的发现吗？从那以后，我写了很多照片上传程序，它们都遇到了相同的问题，当你直接给浏览器一个，可能先手动应用正确的EXIF旋转。然后你就知道用户看到了什么。Croppie（和其他JS裁剪器）就是这样做的。