解决ios手机上传竖拍照片旋转90度问题
html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题;Android手机没这个问题。
因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正。
这里主要利用exif.js读取照片的拍摄信息。
Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展,例如:拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。
EXIF 数据主要来自拍摄的照片,多用于移动端开发,PC 端也会用到,此插件兼容主流浏览器,IE10 以下不支持。
这里主要用到Orientation属性。
Orientation
属性说明如下:
在页面中首先引入 exif.js
主要代码如下:
//获取照片的元信息(拍摄方向)
function getPhotoOrientation(img) {
var orient;
EXIF.getData(img, function() {
orient = EXIF.getTag(this, "Orientation");
});
return orient;
}
//获取照片的拍摄方向
var orient = getPhotoOrientation(image);
//判断图片拍摄方向是否旋转了90度
if (orient == 6) {
canvas.width = width * (image.height / image.width);
canvas.height = width;
drawer.save();
drawer.translate(canvas.width / 2, canvas.height / 2);
drawer.rotate(90 * Math.PI / 180);
drawer.drawImage(image, -(canvas.height / 2), -(canvas.width / 2), canvas.height, canvas.width);
let newImg = canvas.toDataURL("image/jpeg", 1);
$('.img2').attr("src", newImg);
通过读取图片的Orientation属性,如果等于6,则让它旋转90度。
参考demo:http://jsfiddle.net/q3011893/k3z5ev26/embedded/
更多详细内容请访问 https://www.cssge.com/
解决ios手机上传竖拍照片旋转90度问题的更多相关文章
- 利用exif.js解决ios手机上传竖拍照片旋转90度问题
html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...
- 利用exif.js解决ios或Android手机上传竖拍照片旋转90度问题
html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...
- 利用exif.js解决手机上传竖拍照片旋转90\180\270度问题
原文:https://blog.csdn.net/linlzk/article/details/48652635/ html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针 ...
- java解决手机上传竖拍照片旋转90\180\270度问题
<dependency> <groupId>com.drewnoakes</groupId> <artifactId>metadata-extracto ...
- JS 解决 IOS 中拍照图片预览旋转 90度 BUG
上篇博文[ Js利用Canvas实现图片压缩 ]中做了图片压缩上传,但是在IOS真机测试的时候,发现图片预览的时候自动逆时针旋转了90度.对于这个bug,我完全不知道问题出在哪里,接下来就是面向百度编 ...
- iOS 解决图片上传到服务器旋转90度的问题(图片倒置)
//使用swift的朋友们可以,把这个所在的类的.h,在-Header-Swift.h中一用一下. - (UIImage *)fixOrientation:(UIImage *)aImage { if ...
- 移动端上传照片 预览+Draw on Canvas's Demo(解决 iOS 等设备照片旋转 90 度的 bug)
背景: 本人的一个移动端H5项目,需求如下: 需求一:手机相册选取或拍摄照片后在页面上预览 需求二:然后绘制在canvas画布上 这里,我们先看一个demo(http://jsfiddle.net/q ...
- 微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题
微信多图片上传必须挨个上传,也就是不能并行,得串行: 那么我们可以定义一个如下所示的上传函数: var serverIds = []; function uploadImages(localImage ...
- ios手机竖屏拍照图片旋转90°问题解决方法
手机拍照会给图片添加一个Orientaion信息(即拍照方向),如下: 用ios手机拍照,系统会给图片加上一个方向的属性, ios相机默认的拍照方向是后摄Home键在右为正,前摄Home键在左为正. ...
随机推荐
- 基于Handler架构的录音程序
近期我的app须要一个录音功能,于是搜到这篇文章 文章中录音线程与主线程间的通讯是通过内部类訪问外部类成员变量的方式来实现 while (isRecord == true) { //isRecord是 ...
- hdu2993之斜率dp+二分查找
MAX Average Problem Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
- 游戏AI-行为树理论及实现
从上古卷轴中形形色色的人物,到NBA2K中挥洒汗水的球员,从使命召唤中诡计多端的敌人,到刺客信条中栩栩如生的人群.游戏AI几乎存在于游戏中的每个角落,默默构建出一个令人神往的庞大游戏世界. 那么这些复 ...
- 游戏AI(三)—行为树优化之基于事件的行为树
上一篇我们讲到了关于行为树的内存优化,这一篇我们将讲述行为树的另一种优化方法--基于事件的行为树. 问题 在之前的行为树中,我们每帧都要从根节点开始遍历行为树,而目的仅仅是为了得到最近激活的节点,既然 ...
- 【Sqlserver系列】【转载】事物与锁
1 概述 本篇文章简要对事物与锁的分析比较详细,因此就转载了. 2 具体内容 并发可以定义为多个进程同时访问或修改共享数据的能力.处于活动状态而互不干涉的并发用户进程的数量越多,数据库系统的并 ...
- D01 Elon Mulsk The future we're building — and boring
摘要:精选TED. 每个音频不超过2分钟,学英语和吸收伟大思想两不误 音频: https://n1audio.hjfile.cn/st/fb5ace6f-7b63-439d-954c-c4539c1f ...
- Java二维数组的概念和使用方法
二维数组 数组的数组---二维数组的每一个元素是一个一维数组 定义格式 数据类型[][] 数组名 = new 数据类型[二维数组的长度/包含的一维数组的个数][每个一维数组的长度]; int[][] ...
- myeclipse 2014 customize_Perspective 失效解决方法-有效
1.将9个jar复制到myeclipse安装目录\plugins中 2.删除和这9个jar同包名但是版本号较低的9个文件 3.重启myeclipse 2014 三步走: 到这个地址下载 http:// ...
- 微信小程序路过
应该算是入门篇, 从我怎么0基础然后沿着什么方向走,遇到的什么坑,如何方向解决,不过本人接触不是很多,所以也就了解有限. 小程序的前提: 1.小程序大小不允许超过2M.(也就是本地图片,大图精图不要在 ...
- OpenCASCADE 公众号
OpenCASCADE 公众号 eryar@163.com 今天也注册了一个微信公众号,以后会在微信公众号中发表OpenCASCADE学习文章,Blog会与微信公众号同步.下面是微信公众号二维码,欢迎 ...