javascript 如何应用 EXIF 方向
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28216920/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to apply EXIF orientation
提问by Marc
I noticed that it's not every browser that apply the EXIF orientation.
我注意到并不是每个浏览器都应用 EXIF 方向。
Chrome on my mobile doesn't apply the EXIF orientation but Safari mobile does.
我手机上的 Chrome 不应用 EXIF 方向，但 Safari 移动版可以。
So since it's not standard, how can I apply the EXIF orientation without applying twice on Safari?
因此，由于它不是标准的，我如何在不在 Safari 上应用两次的情况下应用 EXIF 方向？
Also I was wondering if it's possible to apply the orientation on the client-side so I don't have to do it after on the server-side (not only an image rotation in javascript).
另外我想知道是否可以在客户端应用方向，这样我就不必在服务器端之后再做（不仅仅是javascript中的图像旋转）。
function handleFileSelect(evt) {
var previewContainer = evt.data.previewContrainer;
evt.stopPropagation();
evt.preventDefault();
var files;
if (evt.target.files) {
files = evt.target.files // FileList object
}
else if (evt.originalEvent.dataTransfer.files) {
files = evt.originalEvent.dataTransfer.files
}
//if there's a file
if (files) {
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
var orientation = 0;
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
//EXIF.getData(f, function () {
// orientation = EXIF.getTag(this, "Orientation");
// alert(orientation);
// alert(EXIF.pretty(this));
//});
createReader(f, previewContainer);
}
}
}
采纳答案by flexponsive
To be sure the image displays correctly regardless of browser and exif orientation, you need to have javascript that does the rotation and puts the image on a canvas. This protects it from "double-rotation" where the rotation is natively supported, e.g. safari.
为了确保无论浏览器和 exif 方向如何，图像都能正确显示，您需要使用 javascript 进行旋转并将图像放在画布上。这可以保护它免受“双重旋转”的影响，其中原生支持旋转，例如 safari。
I solved this problem using the JavaScript-Load-Imageproject from github, which makes it very easy; see my answer here: JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images
我使用github的JavaScript-Load-Image项目解决了这个问题，这使它变得非常容易；在这里看到我的答案：JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images
