解决ios横屏拍照图片自动旋转90度问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>图片上传</title>
<script src="https://cdn.bootcss.com/exif-js/2.3.0/exif.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#app,body,html {
height: 100%
}
body {
font-size: 12px;
-webkit-tap-highlight-color: transparent;
font-family: Helvetica, Arial, sans-serif;
}
</style>
</head>
<body> <div style="height: 50px; line-height: 50px;text-align: center;border-bottom: 1px solid #171E28;">
上传图片:
<input type="file" accept="image/png, image/jpeg, image/jpg" id="uploadImage" onchange="selectFileImage(this);" />
</div>
<img style="width:100%;" id="myImage"/ alt="preview" src=""> <!-- 微信SDK -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<!-- 引入zepto -->
<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
<script> function selectFileImage(fileObj) {
var file = fileObj.files['0'];
//图片方向角 added by lzk
var Orientation = null; if (file) {
console.log("正在上传,请稍后...");
var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式
if (!rFilter.test(file.type)) {
//showMyTips("请选择jpeg、png格式的图片", false);
return;
}
// var URL = URL || webkitURL;
//获取照片方向角属性，用户旋转控制
EXIF.getData(file, function() {
// alert(EXIF.pretty(this));
EXIF.getAllTags(this);
//alert(EXIF.getTag(this, 'Orientation'));
Orientation = EXIF.getTag(this, 'Orientation');
//return;
}); var oReader = new FileReader();
oReader.onload = function(e) {
//var blob = URL.createObjectURL(file);
//_compress(blob, file, basePath);
var image = new Image();
image.src = e.target.result;
image.onload = function() {
var expectWidth = this.naturalWidth;
var expectHeight = this.naturalHeight; if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {
expectWidth = 800;
expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;
} else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {
expectHeight = 1200;
expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;
}
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = expectWidth;
canvas.height = expectHeight;
ctx.drawImage(this, 0, 0, expectWidth, expectHeight);
var base64 = null;
//修复ios
if (navigator.userAgent.match(/iphone/i)) {
console.log('iphone');
//alert(expectWidth + ',' + expectHeight);
//如果方向角不为1，都需要进行旋转 added by lzk
if(Orientation != "" && Orientation != 1){
alert('旋转处理');
switch(Orientation){
case 6://需要顺时针（向左）90度旋转
alert('需要顺时针（向左）90度旋转');
rotateImg(this,'left',canvas);
break;
case 8://需要逆时针（向右）90度旋转
alert('需要顺时针（向右）90度旋转');
rotateImg(this,'right',canvas);
break;
case 3://需要180度旋转
alert('需要180度旋转');
rotateImg(this,'right',canvas);//转两次
rotateImg(this,'right',canvas);
break;
}
} }base64 = canvas.toDataURL("image/jpeg",0.8)
document.getElementById('myImage').src = base64
};
};
oReader.readAsDataURL(file);
}
} //对图片旋转处理 added by lzk
function rotateImg(img, direction,canvas) {
//alert(img);
//最小与最大旋转方向，图片旋转4次后回到原方向
var min_step = 0;
var max_step = 3;
//var img = document.getElementById(pid);
if (img == null)return;
//img的高度和宽度不能在img元素隐藏后获取，否则会出错
var height = img.height;
var width = img.width;
//var step = img.getAttribute('step');
var step = 2;
if (step == null) {
step = min_step;
}
if (direction == 'right') {
step++;
//旋转到原位置，即超过最大值
step > max_step && (step = min_step);
} else {
step--;
step < min_step && (step = max_step);
} //旋转角度以弧度值为参数
var degree = step * 90 * Math.PI / 180;
var ctx = canvas.getContext('2d');
switch (step) {
case 0:
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0);
break;
case 1:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, 0, -height);
break;
case 2:
canvas.width = width;
canvas.height = height;
ctx.rotate(degree);
ctx.drawImage(img, -width, -height);
break;
case 3:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, -width, 0);
break;
}
}
</script>
</body> </html>
解决ios横屏拍照图片自动旋转90度问题的更多相关文章
- iOS开发- 相机(摄像头)获取到的图片自动旋转90度解决办法
http://blog.csdn.net/hitwhylz/article/details/39518463
- 关于android中调用系统拍照，返回图片是旋转90度
转载博客:http://blog.csdn.net/walker02/article/details/8211628 项目开发中遇到的一个问题,对于三星手机在做手机照片选择时出现图片显示不正常,研究后 ...
- JS 解决 IOS 中拍照图片预览旋转 90度 BUG
上篇博文[ Js利用Canvas实现图片压缩 ]中做了图片压缩上传,但是在IOS真机测试的时候,发现图片预览的时候自动逆时针旋转了90度.对于这个bug,我完全不知道问题出在哪里,接下来就是面向百度编 ...
- ios端浏览器拍照上传到服务器，图片被旋转90度 php 解决方案
1.可以通过前端进行解决,本案例通过后端解决的 判断请求的浏览器的ua,如果是ios浏览器则进行90度旋转 重点来了: 必须确保检测的图片是ios设备上传的完整图片,不要在前端压缩过的,因为压缩后的图 ...
- EasyPusher手机直播编码推送之图像旋转90度后画面重复的问题
本文转自EasyDarwin开源团队开发Holo的博客:http://blog.csdn.net/holo_easydarwin 最初在做EasyPusher手机直播的时候遇到过一个问题:手机竖屏推送 ...
- EasyPusher手机直播图像旋转90度后画面重复的问题
本文转自:http://blog.csdn.net/holo_easydarwin/article/details/51147379 最初在做EasyPusher手机直播的时候遇到过一个问题:手机竖屏 ...
- 移动端上传照片 预览+Draw on Canvas's Demo（解决 iOS 等设备照片旋转 90 度的 bug）
背景: 本人的一个移动端H5项目,需求如下: 需求一:手机相册选取或拍摄照片后在页面上预览 需求二:然后绘制在canvas画布上 这里,我们先看一个demo(http://jsfiddle.net/q ...
- 解决ios手机上传竖拍照片旋转90度问题
html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...
- 利用exif.js解决ios或Android手机上传竖拍照片旋转90度问题
html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...
随机推荐
- 阶段3 2.Spring_07.银行转账案例_4 编写事务管理工具类并分析连接和线程解绑
事务管理工具类 首先需要有connection.并且是当前线程上的connection.声明connectionUtils.提供set方法等着spring来注入 有异常需要放在事务里面 close关闭 ...
- JMeter5.0核心源码浅析[转]
[转自:https://blog.csdn.net/zuozewei/article/details/85042829] 源码下载地址:https://github.com/apache/jmeter ...
- Javascript获取html元素的几种方法
1.通过id获取html元素 <!DOCTYPE html> <html> <head lang="en"> <meta charset= ...
- Python字符和字符值(ASCII或Unicode码值)转换方法
Python字符和字符值(ASCII或Unicode码值)转换方法 这篇文章主要介绍了Python字符和字符值(ASCII或Unicode码值)转换方法,即把字符串在ASCII值或者Unicode值之 ...
- SQLServer 断开指定会话
方法1: SELECT * FROM [Master].[dbo].[SYSPROCESSES] WHERE [DBID] IN ( SELECT [DBID] FROM [Master].[dbo] ...
- LeetCode.944-删除列保证排序(Delete Columns to Make Sorted)
这是悦乐书的第362次更新,第389篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第224题(顺位题号是944).我们给出了一个N个小写字母串的数组A,它们的长度都相同. ...
- Centos6.5修改mysql登陆用户密码
1.修改mysql的登陆设置: vim /etc/my.cnf 并在[mysqld] 下面添加一句:skip-grant-tables=1 添加成功后保存退出. 2.重启mysql并修改密码 重启my ...
- HDU2196 Computer【换根dp】
题目传送门 题意: 给定一个$N$个点的树,第$i$条边的长度是$A_i$,求每个点到其他所有点的最长距离.数据范围:$n ≤ 10000$,$A_i ≤ 10_9$ 分析 首先,从随便哪个节点($1 ...
- tail命令 查看文件尾部 输出文件后n行，默认查看文件的后10行
tail命令 查看文件尾部 用于查看日志 默认查看文件的后10行 -n 3 数字 也可以忽略-n 直接加数字 tail 3 查看文件后3行 [root@localhost ~]# tail /e ...
- python 并发编程 IO模型介绍
gevent 底层是怎么实现? io模型4个重要概念: 两类 一类:同步.异步 提交任务的方式 同步: 提交完任务后,在原地等待结果,拿到结果后,才执行下一行代码 #所谓同步,就是在发出一个功能调用时 ...