前端(十七):移动端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>
目录
相关文章
|
8天前
|
移动开发 前端开发 Android开发
mPaaS 常见问题之移动开发平台 mpaas的H5 前端 Kylin 框架引入vant后包特别大如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
56 0
|
8天前
|
移动开发 编解码 前端开发
【面试题】前端 移动端自适应?
【面试题】前端 移动端自适应?
|
8天前
|
前端开发 JavaScript
Web前端之移动端课程开发之06.bootstrap
Web前端之移动端课程开发之06.bootstrap
51 0
|
8月前
|
JSON 前端开发 JavaScript
前端(十七)——gitee上开源一个移动端礼盒商城项目(前端+后台)
前端(十七)——gitee上开源一个移动端礼盒商城项目(前端+后台)
100 0
|
8月前
|
前端开发
前端小项目:旋转太极
前端小项目:旋转太极
33 0
|
2天前
|
Web App开发 前端开发 UED
前端开发之移动端体验优化
在一个前端项目中,面对移动端网页加载慢的问题,团队使用Chrome开发者工具和Lighthouse进行性能分析,发现资源加载、重绘回流和首屏空白是瓶颈。通过压缩图片和视频、使用懒加载、优化CSS样式、预加载内容及利用阿里云CDN,成功提升加载速度,改善用户体验,强调了前端性能优化的关键性。
76 0
前端开发之移动端体验优化
|
8天前
|
编解码 前端开发 JavaScript
【Web 前端】移动端适配方案有哪些?
【4月更文挑战第22天】【Web 前端】移动端适配方案有哪些?
|
5月前
|
前端开发 UED 计算机视觉
前端调取摄像头并实现拍照功能
前端调取摄像头并实现拍照功能
426 0
|
8天前
|
前端开发 JavaScript 容器
前端vw自适应解决方案,适用pc端以及移动端,适用webpack以及vite,适用vue以及react
前端vw自适应解决方案,适用pc端以及移动端,适用webpack以及vite,适用vue以及react
85 0
|
8天前
|
编解码 前端开发 UED
Web前端开发中的移动端适配与响应式设计
【2月更文挑战第11天】 对于现代 Web 前端开发而言,移动端适配与响应式设计是至关重要的技术环节。移动设备的普及使得用户更多地通过手机或平板设备访问网站,因此,如何有效地适配各种屏幕尺寸并提供良好的用户体验成为了前端开发者需要面对的重要问题。本文将介绍移动端适配与响应式设计的基本原理,并结合实际案例探讨其在前端开发中的应用。