feat: replace manual binary EXIF parser with robust exifr library on frontend
This commit is contained in:
Vendored
+7
-7
@@ -21,13 +21,13 @@
|
||||
<meta name="twitter:title" content="Travel Planner - Lên kế hoạch chuyến đi của bạn" />
|
||||
<meta name="twitter:description" content="Khám phá những hành trình tuyệt vời và chia sẻ khoảnh khắc đẹp với cộng đồng du lịch." />
|
||||
<meta name="twitter:image" content="https://yotrip.labz.io.vn/background.avif" />
|
||||
<script type="module" crossorigin src="/assets/index-CqagDF1K.js"></script>
|
||||
<link rel="modulepreload" crossorigin href="/assets/rolldown-runtime-Cyuzqnbw.js">
|
||||
<link rel="modulepreload" crossorigin href="/assets/vendor-others-VIU5qAPG.js">
|
||||
<link rel="modulepreload" crossorigin href="/assets/vendor-editor-DOXkNaRS.js">
|
||||
<link rel="modulepreload" crossorigin href="/assets/vendor-maps-DY-S_hoR.js">
|
||||
<link rel="modulepreload" crossorigin href="/assets/vendor-react-BqXL8Z-i.js">
|
||||
<link rel="modulepreload" crossorigin href="/assets/vendor-pdf-IjT8x9OX.js">
|
||||
<script type="module" crossorigin src="/assets/index-B_EfWg-q.js"></script>
|
||||
<link rel="modulepreload" crossorigin href="/assets/rolldown-runtime-CMxvf4Kt.js">
|
||||
<link rel="modulepreload" crossorigin href="/assets/vendor-others-9VIIAnER.js">
|
||||
<link rel="modulepreload" crossorigin href="/assets/vendor-editor-BDwQQzB8.js">
|
||||
<link rel="modulepreload" crossorigin href="/assets/vendor-maps-1-B38H26.js">
|
||||
<link rel="modulepreload" crossorigin href="/assets/vendor-react-OU16SOQH.js">
|
||||
<link rel="modulepreload" crossorigin href="/assets/vendor-pdf-CKa2gyHu.js">
|
||||
<link rel="stylesheet" crossorigin href="/assets/vendor-maps-CcXJxNtP.css">
|
||||
<link rel="stylesheet" crossorigin href="/assets/vendor-react-CuSj0z1j.css">
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-w726aohe.css">
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
"@capacitor/local-notifications": "^8.2.0",
|
||||
"@codetrix-studio/capacitor-google-auth": "^3.4.0-rc.4",
|
||||
"date-fns": "^4.4.0",
|
||||
"exifr": "^7.1.3",
|
||||
"jspdf": "^4.2.1",
|
||||
"jspdf-autotable": "^5.0.8",
|
||||
"leaflet": "^1.9.4",
|
||||
|
||||
@@ -1,126 +1,4 @@
|
||||
// Helper to extract GPS location from EXIF tags in JPEG/JPG files
|
||||
function getExifGps(file: File): Promise<{ latitude: number; longitude: number } | null> {
|
||||
return new Promise((resolve) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
try {
|
||||
const buffer = e.target?.result as ArrayBuffer;
|
||||
const view = new DataView(buffer);
|
||||
if (view.byteLength < 4) {
|
||||
resolve(null);
|
||||
return;
|
||||
}
|
||||
if (view.getUint16(0, false) !== 0xFFD8) {
|
||||
resolve(null);
|
||||
return;
|
||||
}
|
||||
let offset = 2;
|
||||
const length = view.byteLength;
|
||||
while (offset < length - 2) {
|
||||
const marker = view.getUint16(offset, false);
|
||||
if (marker === 0xFFE1) {
|
||||
const app1Length = view.getUint16(offset + 2, false);
|
||||
if (offset + 4 + app1Length > length) {
|
||||
resolve(null);
|
||||
return;
|
||||
}
|
||||
const exifHeader = view.getUint32(offset + 4, false);
|
||||
if (exifHeader === 0x45786966) {
|
||||
const tiffOffset = offset + 10;
|
||||
const bigEndian = view.getUint16(tiffOffset, false) === 0x4D4D;
|
||||
if (view.getUint16(tiffOffset + 2, bigEndian) !== 0x002A) {
|
||||
resolve(null);
|
||||
return;
|
||||
}
|
||||
const firstIFD = view.getUint32(tiffOffset + 4, bigEndian);
|
||||
let ifdOffset = tiffOffset + firstIFD;
|
||||
if (ifdOffset + 2 > length) {
|
||||
resolve(null);
|
||||
return;
|
||||
}
|
||||
const numEntries = view.getUint16(ifdOffset, bigEndian);
|
||||
let gpsInfoOffset = 0;
|
||||
for (let i = 0; i < numEntries; i++) {
|
||||
const entryOffset = ifdOffset + 2 + i * 12;
|
||||
if (entryOffset + 12 > length) break;
|
||||
const tag = view.getUint16(entryOffset, bigEndian);
|
||||
if (tag === 0x8825) {
|
||||
gpsInfoOffset = view.getUint32(entryOffset + 8, bigEndian);
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (gpsInfoOffset) {
|
||||
const gpsIFDOffset = tiffOffset + gpsInfoOffset;
|
||||
if (gpsIFDOffset + 2 > length) {
|
||||
resolve(null);
|
||||
return;
|
||||
}
|
||||
const numGpsEntries = view.getUint16(gpsIFDOffset, bigEndian);
|
||||
let latRef = 'N';
|
||||
let lonRef = 'E';
|
||||
let latVal: number[] = [];
|
||||
let lonVal: number[] = [];
|
||||
for (let i = 0; i < numGpsEntries; i++) {
|
||||
const entryOffset = gpsIFDOffset + 2 + i * 12;
|
||||
if (entryOffset + 12 > length) break;
|
||||
const tag = view.getUint16(entryOffset, bigEndian);
|
||||
if (tag === 1) {
|
||||
latRef = String.fromCharCode(view.getUint8(entryOffset + 8));
|
||||
} else if (tag === 2) {
|
||||
const offsetVal = view.getUint32(entryOffset + 8, bigEndian);
|
||||
latVal = readRationalArray(view, tiffOffset + offsetVal, bigEndian, length);
|
||||
} else if (tag === 3) {
|
||||
lonRef = String.fromCharCode(view.getUint8(entryOffset + 8));
|
||||
} else if (tag === 4) {
|
||||
const offsetVal = view.getUint32(entryOffset + 8, bigEndian);
|
||||
lonVal = readRationalArray(view, tiffOffset + offsetVal, bigEndian, length);
|
||||
}
|
||||
}
|
||||
if (latVal.length === 3 && lonVal.length === 3) {
|
||||
const latitude = convertDMSToDD(latVal[0], latVal[1], latVal[2], latRef);
|
||||
const longitude = convertDMSToDD(lonVal[0], lonVal[1], lonVal[2], lonRef);
|
||||
resolve({ latitude, longitude });
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
break;
|
||||
} else if (marker >= 0xFFD0 && marker <= 0xFFD9) {
|
||||
offset += 2;
|
||||
} else {
|
||||
const blockLength = view.getUint16(offset + 2, false);
|
||||
offset += 2 + blockLength;
|
||||
}
|
||||
}
|
||||
resolve(null);
|
||||
} catch (err) {
|
||||
console.error('Error parsing EXIF:', err);
|
||||
resolve(null);
|
||||
}
|
||||
};
|
||||
reader.onerror = () => resolve(null);
|
||||
reader.readAsArrayBuffer(file.slice(0, 128 * 1024));
|
||||
});
|
||||
}
|
||||
|
||||
function readRationalArray(view: DataView, offset: number, bigEndian: boolean, maxLen: number): number[] {
|
||||
const values = [];
|
||||
if (offset + 24 > maxLen) return [];
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const num = view.getUint32(offset + i * 8, bigEndian);
|
||||
const den = view.getUint32(offset + i * 8 + 4, bigEndian);
|
||||
values.push(den === 0 ? 0 : num / den);
|
||||
}
|
||||
return values;
|
||||
}
|
||||
|
||||
function convertDMSToDD(degrees: number, minutes: number, seconds: number, ref: string): number {
|
||||
let dd = degrees + minutes / 60 + seconds / 3600;
|
||||
if (ref === 'S' || ref === 'W') {
|
||||
dd = -dd;
|
||||
}
|
||||
return dd;
|
||||
}
|
||||
import exifr from 'exifr';
|
||||
|
||||
interface ProcessedImageResult {
|
||||
file: File;
|
||||
@@ -129,17 +7,18 @@ interface ProcessedImageResult {
|
||||
}
|
||||
|
||||
export const processAndResizeImage = async (file: File): Promise<ProcessedImageResult> => {
|
||||
// 1. Read EXIF coordinates first from the original file
|
||||
// 1. Read EXIF coordinates first from the original file using exifr
|
||||
let latitude: number | null = null;
|
||||
let longitude: number | null = null;
|
||||
try {
|
||||
const gps = await getExifGps(file);
|
||||
if (gps) {
|
||||
const gps = await exifr.gps(file);
|
||||
if (gps && typeof gps.latitude === 'number' && typeof gps.longitude === 'number') {
|
||||
latitude = gps.latitude;
|
||||
longitude = gps.longitude;
|
||||
console.log('[imageProcessor] Successfully parsed EXIF coordinates via exifr:', latitude, longitude);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('[imageProcessor] Failed to read EXIF GPS:', e);
|
||||
console.error('[imageProcessor] Failed to read EXIF GPS using exifr:', e);
|
||||
}
|
||||
|
||||
// 2. Perform resizing to maximum 2048px on its longest edge
|
||||
|
||||
Reference in New Issue
Block a user