前端(十七):移动端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>
目录
相关文章
|
1月前
|
移动开发 前端开发 Android开发
mPaaS 常见问题之移动开发平台 mpaas的H5 前端 Kylin 框架引入vant后包特别大如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
43 0
|
3月前
|
移动开发 编解码 前端开发
【面试题】前端 移动端自适应?
【面试题】前端 移动端自适应?
|
4月前
|
前端开发 JavaScript
Web前端之移动端课程开发之06.bootstrap
Web前端之移动端课程开发之06.bootstrap
48 0
|
7月前
|
JSON 前端开发 JavaScript
前端(十七)——gitee上开源一个移动端礼盒商城项目(前端+后台)
前端(十七)——gitee上开源一个移动端礼盒商城项目(前端+后台)
|
7月前
|
前端开发
前端小项目:旋转太极
前端小项目:旋转太极
31 0
|
4月前
|
前端开发 UED 计算机视觉
前端调取摄像头并实现拍照功能
前端调取摄像头并实现拍照功能
375 0
|
1月前
|
前端开发 JavaScript 容器
前端vw自适应解决方案,适用pc端以及移动端,适用webpack以及vite,适用vue以及react
前端vw自适应解决方案,适用pc端以及移动端,适用webpack以及vite,适用vue以及react
74 0
|
1月前
|
编解码 前端开发 UED
Web前端开发中的移动端适配与响应式设计
【2月更文挑战第11天】 对于现代 Web 前端开发而言,移动端适配与响应式设计是至关重要的技术环节。移动设备的普及使得用户更多地通过手机或平板设备访问网站,因此,如何有效地适配各种屏幕尺寸并提供良好的用户体验成为了前端开发者需要面对的重要问题。本文将介绍移动端适配与响应式设计的基本原理,并结合实际案例探讨其在前端开发中的应用。
|
3月前
|
移动开发 前端开发 Windows
前端H5怎么简单的实现复制text内容的操作
前端H5怎么简单的实现复制text内容的操作
29 0
前端H5怎么简单的实现复制text内容的操作
|
4月前
|
移动开发 前端开发 JavaScript
web前端移动端课程之canvas教程系列
web前端移动端课程之canvas教程系列
48 0