前端 JS 獲取 Image 圖像 寬高 尺寸 簡介 項目中用到獲取圖片的原始尺寸,然後適配寬高;網上的大部分前端解決方案,都是new Image()後,在onload事件中獲取image的尺寸。 在圖片數量較多的時候,這樣的獲取效率實在是低下。所有就有了這篇文章。通過直接讀取解析文件的位元組碼來獲取 ...
前端 JS 獲取 Image 圖像 寬高 尺寸
簡介
項目中用到獲取圖片的原始尺寸,然後適配寬高;網上的大部分前端解決方案,都是new Image()後,在onload事件中獲取image的尺寸。
在圖片數量較多的時候,這樣的獲取效率實在是低下。所有就有了這篇文章。通過直接讀取解析文件的位元組碼來獲取圖片的尺寸。
IMAGE_HEAD_SIGS
var IMAGE_HEAD_SIGS = {
GIF: [0x47, 0x49, 0x46], //'G' 'I' 'F' ascii
PNG: [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a],
JPG: [0xff, 0xd8, 0xff, 0xe0],
BMP: [0x42, 0x4d]
}
PNG
function ReadPNG(bytes) {
if (bytes.slice(0, 8).toString() === IMAGE_HEAD_SIGS.PNG.toString()) {
let width = readUint32BE(bytes, 16);
let height = readUint32BE(bytes, 20);
return { width, height }
}
}
JPG
function ReadJPG(bytes) {
if (bytes.slice(0, 4).toString() === IMAGE_HEAD_SIGS.JPG.toString()) {
const M_SOF0 = 0xC0; /* Start Of Frame N */
const M_SOF1 = 0xC1; /* N indicates which compression process */
const M_SOF2 = 0xC2; /* Only SOF0-SOF2 are now in common use */
const M_SOF3 = 0xC3;
const M_SOF5 = 0xC5; /* NB: codes C4 and CC are NOT SOF markers */
const M_SOF6 = 0xC6;
const M_SOF7 = 0xC7;
const M_SOF9 = 0xC9;
const M_SOF10 = 0xCA;
const M_SOF11 = 0xCB;
const M_SOF13 = 0xCD;
const M_SOF14 = 0xCE;
const M_SOF15 = 0xCF;
for (let i = 0; i < bytes.length; i++) {
if (bytes[i] === 0xFF) {
switch (bytes[i + 1]) {
case M_SOF0:
case M_SOF1:
case M_SOF2:
case M_SOF3:
case M_SOF5:
case M_SOF6:
case M_SOF7:
case M_SOF9:
case M_SOF10:
case M_SOF11:
case M_SOF13:
case M_SOF14:
case M_SOF15:
{
//高在前,寬在後。
let width = readUint16BE(bytes, i + 7)
let height = readUint16BE(bytes, i + 5)
return { width, height }
}
default:
break;
}
}
}
}
}
GIF
function ReadGIF(bytes) {
if (bytes.slice(0, 3).toString() === IMAGE_HEAD_SIGS.GIF.toString()) {
let width = readUint16LE(bytes, 6);
let height = readUint16LE(bytes, 8);
return { width, height }
}
}
BMP
function ReadBMP(bytes) {
if (bytes.slice(0, 2).toString() === IMAGE_HEAD_SIGS.BMP.toString()) {
//雖然格式為4位元組,這裡只取2位元組,確保height為正數。為負數時,圖像為倒置圖像。
let height = readUint16LE(bytes, 22);
let width = readUint16LE(bytes, 18);
return { width, height }
}
}
NPM
npm i image-dimensionjs