前端(十七):移动端H5拍照旋转获取方向

简介: 移动端H5拍照旋转获取方向

安装exif-js

npm install exif-js --save    
// or
<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>

获取拍照方向

EXIF.getTag(this, 'Orientation')

参数 描述
6 无旋转 0deg
1 左旋转 90deg
3 右旋转 90deg
8 旋转 180deg
<input id="file" type="file" capture="camera" accept="image/*" onchange="handleFileChange(this)">

<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>

<script>

    function handleFileChange(element) {
    

        var file = element.files[0];

        EXIF.getData(file, function () {
    

            const o = EXIF.getTag(this, 'Orientation');

            console.log(o); // 6 1 3 8

        });

    }

</script>
目录
相关文章
|
2月前
|
移动开发 前端开发 Android开发
mPaaS 常见问题之移动开发平台 mpaas的H5 前端 Kylin 框架引入vant后包特别大如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
126 0
|
2月前
|
移动开发 编解码 前端开发
【面试题】前端 移动端自适应?
【面试题】前端 移动端自适应?
|
2月前
|
前端开发 JavaScript
Web前端之移动端课程开发之06.bootstrap
Web前端之移动端课程开发之06.bootstrap
57 0
|
10月前
|
JSON 前端开发 JavaScript
前端(十七)——gitee上开源一个移动端礼盒商城项目(前端+后台)
前端(十七)——gitee上开源一个移动端礼盒商城项目(前端+后台)
112 0
|
10月前
|
前端开发
前端小项目:旋转太极
前端小项目:旋转太极
41 0
|
12天前
|
前端开发
前端 CSS 经典:旋转边框效果
前端 CSS 经典:旋转边框效果
10 0
|
2月前
|
Web App开发 前端开发 UED
前端开发之移动端体验优化
在一个前端项目中,面对移动端网页加载慢的问题,团队使用Chrome开发者工具和Lighthouse进行性能分析,发现资源加载、重绘回流和首屏空白是瓶颈。通过压缩图片和视频、使用懒加载、优化CSS样式、预加载内容及利用阿里云CDN,成功提升加载速度,改善用户体验,强调了前端性能优化的关键性。
98 0
前端开发之移动端体验优化
|
2月前
|
编解码 前端开发 JavaScript
【Web 前端】移动端适配方案有哪些?
【4月更文挑战第22天】【Web 前端】移动端适配方案有哪些?
|
2月前
|
存储 移动开发 前端开发
【Web 前端】H5新特性有哪些?
【4月更文挑战第22天】【Web 前端】H5新特性有哪些?
|
7月前
|
前端开发 UED 计算机视觉
前端调取摄像头并实现拍照功能
前端调取摄像头并实现拍照功能
534 0