EXIF-JS

最近在开发安卓相机,EXIF老是写不进去,想看看原始数据。

参考:https://comate.baidu.com/zh/page/mhlklw3hr9v

库:exif-js

复制代码
<!DOCTYPE html>
<html>
<head>
<title>图片EXIF信息读取</title>
<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
<style>
h1 { text-align:center; }
#img { max-width:300px; max-height:300px; }
</style>
</head>
<body>
<h1>图片EXIF信息读取</h1>
<p>参考:https://comate.baidu.com/zh/page/mhlklw3hr9v,库:exif-js</p>
<input type="file" id="input_file" accept="image/*"><br>
<img id="img">
<div id="exif_data"></div>
<script>
input_file.addEventListener('change', function(e) {
	const file = e.target.files[0];
	if (!file) return;
    
    img.src = URL.createObjectURL(file);
    
    EXIF.getData(file, function() {
        const allTags = EXIF.getAllTags(this);        
                
        if (!allTags || Object.keys(allTags).length === 0) {
            output.textContent = "未检测到EXIF数据";
            return;
        }

        let result = "";
        for (const [tag, value] of Object.entries(allTags)) {
             result += `${tag}: ${JSON.stringify(value)}<br>`;			 
        }
        exif_data.innerHTML = result;
    });
});
</script>
</body>
</html>

使用【浏览器拆分视图】对比数据一目了然

相关推荐
她说可以呀8 小时前
Vue插槽
前端·javascript·vue.js
qq_448011168 小时前
Vue + Jinja2两套模版与法冲突造成undefinedError
前端·javascript·vue.js
FRing0310 小时前
JavaScript入门到精通三十二(深拷贝、浅拷贝、递归函数)
开发语言·前端·javascript
兰亭妙微UI设计公司13 小时前
兰亭妙微ui设计公司分享:B端组件命名如何支持团队协作
前端·javascript·vue.js
小大宇13 小时前
Vue知识点-ElementPlus-03提示框+询问+通知
前端·javascript·vue.js
前端技术官14 小时前
前端的技术判断力是怎么练出来的?
javascript·web前端·localstorage·debounce·弱网处理
程序员大阳16 小时前
副队长JavaScript教程(60)-BOM 初识:window 对象与浏览器模型
javascript·bom·window对象·浏览器模型
web打印社区16 小时前
Chrome-kiosk-printing能上生产吗
开发语言·前端·javascript·chrome·websocket
志尊宝16 小时前
AI原生前端开发(041):AI辅助的状态管理(Zustand/Pinia)
前端·javascript·ai-native
Geoffwo16 小时前
DSH-SKILL基础
javascript