// 解决IOS上传竖向照片会旋转90度的问题
rotate() {
const that = this;
that.imgOrientation = 1;
let Orientation = null;
const _filelist = $('#showImg')[0].files[0];
$('.weui-uploader__file').removeClass('rotate-90');
$('.weui-uploader__file').removeClass('rotate-180');
$('.weui-uploader__file').removeClass('rotate-90-back');
// 获取图片Orientation参数
EXIF.getData(_filelist, function () {
Orientation = EXIF.getTag(this, 'Orientation');
that.imgOrientation = Orientation; if (Orientation) {
switch (Orientation) {
case 6: // 正常竖拍
$('.weui-uploader__file').addClass('rotate-90');
break;
case 3: // 横线拍-180
$('.weui-uploader__file').addClass('rotate-180');
break;
case 8: // 竖向拍-180
$('.weui-uploader__file').addClass('rotate-90-back');
break;
default:
$('.weui-uploader__file').removeClass('rotate-90');
$('.weui-uploader__file').removeClass('rotate-180');
$('.weui-uploader__file').removeClass('rotate-90-back');
}
}
});
}

解决IOS上传竖向照片会旋转90度的问题的更多相关文章

  1. JS 解决 IOS 中拍照图片预览旋转 90度 BUG

    上篇博文[ Js利用Canvas实现图片压缩 ]中做了图片压缩上传,但是在IOS真机测试的时候,发现图片预览的时候自动逆时针旋转了90度.对于这个bug,我完全不知道问题出在哪里,接下来就是面向百度编 ...

  2. 利用exif.js解决手机上传竖拍照片旋转90\180\270度问题

    原文:https://blog.csdn.net/linlzk/article/details/48652635/ html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针 ...

  3. java解决手机上传竖拍照片旋转90\180\270度问题

    <dependency> <groupId>com.drewnoakes</groupId> <artifactId>metadata-extracto ...

  4. 利用exif.js解决ios手机上传竖拍照片旋转90度问题

    html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...

  5. 解决ios手机上传竖拍照片旋转90度问题

    html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...

  6. 利用exif.js解决ios或Android手机上传竖拍照片旋转90度问题

    html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...

  7. 移动端上传照片 预览+Draw on Canvas's Demo(解决 iOS 等设备照片旋转 90 度的 bug)

    背景: 本人的一个移动端H5项目,需求如下: 需求一:手机相册选取或拍摄照片后在页面上预览 需求二:然后绘制在canvas画布上 这里,我们先看一个demo(http://jsfiddle.net/q ...

  8. Ajax上传文件/照片时报错TypeError :Illegal invocation

    问题 Ajax上传文件/照片时报错TypeError :Illegal invocation 解决 网上搜索问题,错误原因可能有以下几个,依次检查: 请求类型有误,如post请求,但在后台设置的是ge ...

  9. js-input file 文件上传(照片,视频,音频)

    在此做一个笔记 <input type="file" accept="image/*" capture="camera"> &l ...

  10. PHP 如何阻止用户上传成人照片或者裸照

    在这份教程中,我们将会学习到如何阻止用户通过PHP上传成人照片或者裸照. 示例   下载 我在phpclasses.org上面偶然发现一个很有用的,由Bakr Alsharif开发的可以帮助开发者基于 ...

随机推荐

  1. 日志服务化&可视化&统计化

    概述: ELK是Elasticsearch(简称es).Logstash.Kibana的简称,这三者是核心套件,但并非全部. Filebeat 日志采集工具  Logstash数据处理引擎   ela ...

  2. 2021 icpc 沈阳 I 【分式线性变换的保交比性】

    分式线性变换的保交比性 对于分式线性变换,具有保交比性 应用 在复数域下,存在分式线性变换,给定三个输入和输出,再给定第四个输入,求其在这个分式线性变换下的输出. https://codeforces ...

  3. Django Cannot assign "A1": "B1" must be a "C1" instance.

    Django Cannot assign "A1": "B1" must be a "C1" instance. 原因:使用了外键 说明:如 ...

  4. 使用 p7zip 加密解密

    1. 安装 yum install p7zip p7zip-plugins 2. 加密打包 7z a -ptest test.7z test.php -p 密码 test.php 可以是目录 或者 多 ...

  5. vue super flow 多种形状

    1 <template> 2 <v-container class="workflow-container" grid-list-xl fluid> 3 & ...

  6. 连接Oracle 19c出现ORA-28040:没有匹配的验证协议

    错误信息:ORA-28040:没有匹配的验证协议处理方法 出现这个原因是因为你的Oracle连接客户端与服务端Oracle的版本不匹配造成的.一般是低版本客户端连接高版本服务端出现. 高版本连接低版本 ...

  7. HTML学习笔记6----链接

    随笔记录方便自己和同路人查阅. #------------------------------------------------我是可耻的分割线--------------------------- ...

  8. vue- cube-scroll踩坑记

    坑: 下拉刷新,上拉加载一直处于加载中  ---  原因:未结束此次下拉或上拉  ---解决:forceUpdate()结束上拉或下拉 无法正常滚动  --- 原因:数据更新了,但页面高度未变化 -- ...

  9. NOIP2022 游记

    无论结局如何,我都曾经来过. Day -1 zak 模拟赛,被殴打了. Day 0 上午 补模拟赛题. 下午 补模拟赛题. 徐老师过来分配了第二天下午造数据名单. 我造 T2.希望不会太难.(flag ...

  10. 1996. 游戏中弱角色的数量 (Medium)

    问题描述 1996. 游戏中弱角色的数量 (Medium) 你正在参加一个多角色游戏,每个角色都有两个主要属性: 攻击 和 防御 .给你一个二维整数数组 properties ,其中 properti ...