Jika Anda hanya ingin tag orientasi dan tidak ada yang lain dan tidak suka menyertakan pustaka javascript besar lainnya, saya menulis kode kecil yang mengekstrak tag orientasi secepat mungkin (Menggunakan DataView dan readAsArrayBuffer
tersedia di IE10 +, tetapi Anda dapat menulis pembaca data Anda sendiri untuk browser lama):
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)
{
if (view.getUint16(offset+2, false) <= 8) return callback(-1);
var marker = view.getUint16(offset, false);
offset += 2;
if (marker == 0xFFE1)
{
if (view.getUint32(offset += 2, false) != 0x45786966)
{
return 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);
}
// usage:
var input = document.getElementById('input');
input.onchange = function(e) {
getOrientation(input.files[0], function(orientation) {
alert('orientation: ' + orientation);
});
}
<input id='input' type='file' />
nilai:
-2: not jpeg
-1: not defined
Bagi mereka yang menggunakan Ketikan, Anda dapat menggunakan kode berikut:
export const getOrientation = (file: File, callback: Function) => {
var reader = new FileReader();
reader.onload = (event: ProgressEvent) => {
if (! event.target) {
return;
}
const file = event.target as FileReader;
const view = new DataView(file.result as ArrayBuffer);
if (view.getUint16(0, false) != 0xFFD8) {
return callback(-2);
}
const length = view.byteLength
let offset = 2;
while (offset < length)
{
if (view.getUint16(offset+2, false) <= 8) return callback(-1);
let marker = view.getUint16(offset, false);
offset += 2;
if (marker == 0xFFE1) {
if (view.getUint32(offset += 2, false) != 0x45786966) {
return callback(-1);
}
let little = view.getUint16(offset += 6, false) == 0x4949;
offset += view.getUint32(offset + 4, little);
let tags = view.getUint16(offset, little);
offset += 2;
for (let 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);
}
Anda dapat menggunakan pustaka exif-js yang dikombinasikan dengan API File HTML5: http://jsfiddle.net/xQnMd/1/ .
sumber
Firefox 26 mendukung
image-orientation: from-image
: gambar ditampilkan potret atau lanskap, tergantung pada data EXIF. (Lihat sethfowler.org/blog/2013/09/13/new-in-firefox-26-css-image-orientation .)Ada juga bug untuk menerapkan ini di Chrome .
Berhati-hatilah karena properti ini hanya didukung oleh Firefox dan kemungkinan besar tidak akan digunakan lagi .
sumber
https://github.com/blueimp/JavaScript-Load-Image adalah pustaka javascript modern yang tidak hanya dapat mengekstrak tanda orientasi exif - ia juga dapat dengan benar mencerminkan / memutar gambar JPEG di sisi klien.
Saya baru saja memecahkan masalah yang sama dengan pustaka ini: JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images
sumber
Jika Anda menginginkannya lintas browser, taruhan terbaik Anda adalah melakukannya di server. Anda bisa memiliki API yang mengambil URL file dan mengembalikan Anda data EXIF; PHP memiliki modul untuk itu .
Ini bisa dilakukan menggunakan Ajax sehingga akan mulus bagi pengguna. Jika Anda tidak peduli tentang kompatibilitas lintas-browser, dan dapat mengandalkan fungsionalitas file HTML5 , lihat perpustakaan JsJPEGmeta yang memungkinkan Anda mendapatkan data itu dalam JavaScript asli.
sumber
Lihat modul yang saya tulis (Anda dapat menggunakannya di browser) yang mengubah orientasi exif menjadi transformasi CSS: https://github.com/Sobesednik/exif2css
Ada juga program node ini untuk menghasilkan perlengkapan JPEG dengan semua orientasi: https://github.com/Sobesednik/generate-exif-fixtures
sumber
Kode ekspansi saya unggah untuk menampilkan foto dengan kamera android pada html seperti biasa pada beberapa tag img dengan rotasi yang tepat, terutama untuk tag img yang lebarnya lebih lebar dari tinggi. Saya tahu kode ini jelek tetapi Anda tidak perlu menginstal paket lain. (Saya menggunakan kode di atas untuk mendapatkan nilai rotasi exif, Terima kasih.)
dan kemudian gunakan seperti
sumber
Meningkatkan / Menambahkan lebih banyak fungsionalitas ke jawaban Ali dari sebelumnya, saya membuat metode util di Typecript yang sesuai dengan kebutuhan saya untuk masalah ini. Versi ini mengembalikan rotasi dalam derajat yang mungkin juga Anda perlukan untuk proyek Anda.
Pemakaian:
sumber