js获取图片信息
weixin_42056162
于 2023-11-27 11:07:42 发布
阅读量862
收藏
2
点赞数
1
CC 4.0 BY-SA版权
文章标签：
javascript
开发语言
ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42056162/article/details/134640710
本文详细介绍了如何使用JavaScript获取图片的元数据，包括图片尺寸、类型、颜色模式等信息。通过DOM API和File API，开发者可以轻松获取到图片在网页中的各项属性，从而优化用户体验。
摘要生成于
C知道
，由 DeepSeek-R1 满血版支持，
前往体验 >
function getImageData(img) {
return new Promise(function(resolve, reject) {
function handleBinaryFile(binFile) {
var data = findEXIFinJPEG(binFile);
var iptcdata = findIPTCinJPEG(binFile);
resolve({
exif: data || {},
iptc: iptcdata || {}
})
}
if (/^data\:/i.test(img)) { // Data URI
var arrayBuffer = base64ToArrayBuffer(img);
handleBinaryFile(arrayBuffer);
} else if (/^blob\:/i.test(img)) { // Object URL
var fileReader = new FileReader();
fileReader.onload = function(e) {
handleBinaryFile(e.target.result);
};
objectURLToBlob(img, function(blob) {
fileReader.readAsArrayBuffer(blob);
});
} else {
if (typeof window === 'object' && 'document' in window) {
var http = new XMLHttpRequest();
http.onload = function() {
if (this.status == 200 || this.status === 0) {
handleBinaryFile(http.response);
} else {
throw "Could not load image";
}
http = null;
};
http.open("GET", img, true);
http.responseType = "arraybuffer";
http.send(null);
return
}
if (typeof plus === 'object') {
plus.io.resolveLocalFileSystemURL(getLocalFilePath(img), function(entry) {
entry.file(function(file) {
var fileReader = new plus.io.FileReader()
fileReader.onload = function(data) {
var arrayBuffer = base64ToArrayBuffer(data.target.result);
handleBinaryFile(arrayBuffer)
}
fileReader.onerror = function(error) {
reject(error)
}
fileReader.readAsDataURL(file)
}, function(error) {
reject(error)
})
}, function(error) {
reject(error)
})
return
}
if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
wx.getFileSystemManager().readFile({
filePath: img,
success: function(res) {
handleBinaryFile(res.data)
},
fail: function(error) {
reject(error)
}
})
return
}
reject(new Error('not support'))
}
})
}
function ToDigital(strDu, strFen, strMiao, len) {
len = (len > 6 || typeof (len) == "undefined") ? 6 : len;//精确到小数点后最多六位
strDu = (typeof (strDu) == "undefined" || strDu == "") ? 0 : parseFloat(strDu);
strFen = (typeof (strFen) == "undefined" || strFen == "") ? 0 : parseFloat(strFen) / 60;
strMiao = (typeof (strMiao) == "undefined" || strMiao == "") ? 0 : parseFloat(strMiao) / 3600;
var digital = strDu + strFen + strMiao;
if (digital == 0) {
return "";
} else {
return digital.toFixed(len);
}
}
function getFloatLocationByExif(exif){
if(!exif.GPSLatitude||!exif.GPSLongitude){
return null
}
let lat = (exif.GPSLatitudeRef == 'S'?-1:1)*ToDigital(exif.GPSLatitude[0],exif.GPSLatitude[1],exif.GPSLatitude[2])
let lon = (exif.GPSLongitudeRef == 'W'?-1:1)*ToDigital(exif.GPSLongitude[0],exif.GPSLongitude[1],exif.GPSLongitude[2])
return {lat:lat,lon:lon}
}
function getLocalFilePath(path) {
if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.indexOf('_documents') === 0 || path.indexOf(
'_downloads') === 0) {
return path
}
if (path.indexOf('file://') === 0) {
return path
}
if (path.indexOf('/storage/emulated/0/') === 0) {
return path
}
if (path.indexOf('/') === 0) {
var localFilePath = plus.io.convertAbsoluteFileSystem(path)
if (localFilePath !== path) {
return localFilePath
} else {
path = path.substr(1)
}
}
return '_www/' + path
}
function objectURLToBlob(url, callback) {
var http = new XMLHttpRequest();
http.open("GET", url, true);
http.responseType = "blob";
http.onload = function(e) {
if (this.status == 200 || this.status === 0) {
callback(this.response);
}
};
http.send();
}
function base64ToArrayBuffer(base64, contentType) {
contentType = contentType || base64.match(/^data\:([^\;]+)\;base64,/mi)[1] || ''; // e.g. 'data:image/jpeg;base64,...' => 'image/jpeg'
base64 = base64.replace(/^data\:([^\;]+)\;base64,/gmi, '');
var binary = atob(base64);
var len = binary.length;
var buffer = new ArrayBuffer(len);
var view = new Uint8Array(buffer);
for (var i = 0; i < len; i++) {
view[i] = binary.charCodeAt(i);
}
return buffer;
}
function findEXIFinJPEG(file) {
var dataView = new DataView(file);
if (debug) console.log("Got file of length " + file.byteLength);
if ((dataView.getUint8(0) != 0xFF) || (dataView.getUint8(1) != 0xD8)) {
if (debug) console.log("Not a valid JPEG");
return false; // not a valid jpeg
}
var offset = 2,
length = file.byteLength,
marker;
while (offset < length) {
if (dataView.getUint8(offset) != 0xFF) {
if (debug) console.log("Not a valid marker at offset " + offset + ", found: " + dataView.getUint8(offset));
return false; // not a valid marker, something is wrong
}
marker = dataView.getUint8(offset + 1);
if (debug) console.log(marker);
// we could implement handling for other markers here,
// but we're only looking for 0xFFE1 f