如何应用 EXIF 方向
How to apply EXIF orientation
我注意到并不是每个浏览器都应用 EXIF 方向。
Chrome 在我的手机上不应用 EXIF 方向,但 Safari 手机应用。
既然它不是标准的,我怎样才能应用 EXIF 方向而不在 Safari 上应用两次?
我还想知道是否可以在客户端应用方向,这样我就不必在服务器端之后再做(不仅是 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);
}
}
}
要确保无论浏览器和 exif 方向如何都能正确显示图像,您需要 javascript 进行旋转并将图像放在 canvas 上。这可以保护它不受 "double-rotation" 本身支持旋转的地方的影响,例如野生动物园。
我使用 JavaScript-Load-Image project from github, which makes it very easy; see my answer here: JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images
解决了这个问题
我注意到并不是每个浏览器都应用 EXIF 方向。
Chrome 在我的手机上不应用 EXIF 方向,但 Safari 手机应用。
既然它不是标准的,我怎样才能应用 EXIF 方向而不在 Safari 上应用两次?
我还想知道是否可以在客户端应用方向,这样我就不必在服务器端之后再做(不仅是 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);
}
}
}
要确保无论浏览器和 exif 方向如何都能正确显示图像,您需要 javascript 进行旋转并将图像放在 canvas 上。这可以保护它不受 "double-rotation" 本身支持旋转的地方的影响,例如野生动物园。
我使用 JavaScript-Load-Image project from github, which makes it very easy; see my answer here: JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images
解决了这个问题