Javascript 将类添加到缩略图以更正exif方向
我想更正缩略图的exif方向,这些缩略图在图像上传到服务器之前显示给用户。Javascript 将类添加到缩略图以更正exif方向,javascript,jquery,image,exif,Javascript,Jquery,Image,Exif,我想更正缩略图的exif方向,这些缩略图在图像上传到服务器之前显示给用户。 我设法用Ali检测到缩略图的exif。 仍然缺少的是纠正正确检测到的exif 我试图通过根据每个缩略图的exif方向向其添加css类来实现这一点。灵感来源于。 HTML <form action="create/post" method="post" enctype="multipart/form-data"> <output class="preview-thumbs"><
我设法用Ali检测到缩略图的exif。
仍然缺少的是纠正正确检测到的exif
我试图通过根据每个缩略图的exif方向向其添加css类来实现这一点。灵感来源于。
HTML
<form action="create/post" method="post" enctype="multipart/form-data">
<output class="preview-thumbs"></output><br>
<input type="file" name="images[]" id="upload-post-images" class="upload-images" multiple />
</form>
var input = document.getElementById('upload-post-images');
input.onchange = function(e) {
for (i = 0; i<=e.target.files.length; i++) {
var image = e.target.files[i];
getOrientation(input.files[i], function(orientation) {
if (orientation == 2) {
image.className += 'orientation2';
} else if (orientation == 3) {
image.className += 'orientation3';
} else if (orientation == 4) {
image.className += 'orientation4';
} else if (orientation == 5) {
image.className += 'orientation5';
} else if (orientation == 6) {
image.className += 'orientation6';
} else if (orientation == 7) {
image.className += 'orientation7';
} else if (orientation == 8) {
image.className += 'orientation8';
}
});
}
}
// Function getOrientation by Ali -> https://stackoverflow.com/questions/7584794/accessing-jpeg-exif-rotation-data-in-javascript-on-the-client-side
function getOrientation(file, callback) {
var reader = new FileReader();
reader.onload = function(e) {
var view = new DataView(e.target.result);
if (view.getUint16(0, false) != 0xFFD8) return callback(-2);
var length = view.byteLength, offset = 2;
while (offset < length) {
var marker = view.getUint16(offset, false);
offset += 2;
if (marker == 0xFFE1) {
if (view.getUint32(offset += 2, false) != 0x45786966) callback(-1);
var little = view.getUint16(offset += 6, false) == 0x4949;
offset += view.getUint32(offset + 4, little);
var tags = view.getUint16(offset, little);
offset += 2;
for (var i = 0; i < tags; i++)
if (view.getUint16(offset + (i * 12), little) == 0x0112)
return callback(view.getUint16(offset + (i * 12) + 8, little));
}
else if ((marker & 0xFF00) != 0xFF00) break;
else offset += view.getUint16(offset, false);
}
return callback(-1);
};
reader.readAsArrayBuffer(file.slice(0, 64 * 1024));
}
// Preview the to be uploaded file by Kamyar Nazeri -> https://stackoverflow.com/questions/14069421/show-an-image-preview-before-upload
function handleFileSelect(evt) {
var files = evt.target.files;
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML =
[
'<img style="height: 150px; margin: 5px" src="',
e.target.result,
'" title="', escape(theFile.name),
'"/>'
].join('');
document.getElementsByClassName('preview-thumbs')[0].insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementsByClassName('upload-images')[0].addEventListener('change', handleFileSelect, false);
.orientation2 {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
}
.orientation3 {
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.orientation4 {
-moz-transform: rotate(180deg) scaleX(-1);
-webkit-transform: rotate(180deg) scaleX(-1);
-o-transform: rotate(180deg) scaleX(-1);
transform: rotate(180deg) scaleX(-1);
}
.orientation5 {
-moz-transform: rotate(270deg) scaleX(-1);
-webkit-transform: rotate(270deg) scaleX(-1);
-o-transform: rotate(270deg) scaleX(-1);
transform: rotate(270deg) scaleX(-1);
}
.orientation6 {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.orientation7 {
-moz-transform: rotate(90deg) scaleX(-1);
-webkit-transform: rotate(90deg) scaleX(-1);
-o-transform: rotate(90deg) scaleX(-1);
transform: rotate(90deg) scaleX(-1);
}
.orientation8 {
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
我将非常感谢任何形式的帮助
我无法确定您需要的是isA用户想要将图像上载到我的服务器。在上传之前,我会向用户显示该图像的缩略图。此缩略图将根据其exif标记进行旋转。因此,如果exif标记是例如8,它将被向右翻转。我想通过旋转缩略图来纠正这个问题。为了实现这一点,我想为每个缩略图添加一个类。然后我可以使用这个类来使用css来转换它。我可以检测到缩略图的exif方向,但我无法向它们添加类。