解决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手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...
随机推荐
- Linux监控命令之==>strace
一.命令介绍 strace 常用来跟踪进程执行时的系统调用和所接收的信号.在Linux 世界,进程不能直接访问硬件设备,当进程需要访问硬件设备(比如读取磁盘文件,接收网络数据等等)时,必须由用户态模式 ...
- gradle自动刷新
1.gradle每次更新build.gradle都要刷新一下才能下载依赖 这样显得不太方便. 2.可以在Preferences修改配置来达到自动刷新的目的 如图所示,直接勾选即可,自动同步项目
- eclipse 包含头文件出错
最近这段时间自己在写游戏的框架,在做的过程中遇到了一个问题:没办法#include <iostream>,在eclipse下F3也找不到对应的 iostream 文件, 最后在晚上找资料, ...
- APP Store上架QA&注意事项
一. App Store上架费用,要多少钱. 这个因产品而异,一般是6000-10000元人民币. 二. App Store上架周期,要多久过. 这个因产品而异,正常的话一周内,如果产品老是出问题,被 ...
- 【HANA系列】SAP HANA的ini文件存储路径
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA的ini文件存储 ...
- MySQL：添加用户、删除用户、授权、远程访问、修改密码
1.创建用户 #test表示你要建立的用户名,后面的123456表示密码, #localhost限制在固定地址localhost登陆 CREATE USER test@localhost IDENTI ...
- Linux字符界面字符颜色显示
一.字符颜色 #!/bin/bash #字符颜色显示 #-e:允许echo使用转义 #\033[:开始位 #\033[0m:结束位 #\033等同于\e echo -e "\033[30m黑 ...
- flaskdebug模式
#从flask这个包中导入Flask这个类 #Flask这个类是项目的核心,以后很多操作都是基于这个类的对象 #注册url.注册蓝图等都是基于这个类的对象 from flask import Flas ...
- 执行python程序 出现三部曲
1.执行一个python程序 ,会产生一个进程 ,然后会在内存生成一份内存空间 先把python解释器代码加载到内存里, python解释器代码就是C语言代码 2. 然后再把 自己写的python文件 ...
- OpenTSDB查询和写入毫秒级数据
由于OpenTSDB没有支持Java的SDK进行调用,所以基于Java开发OpenTSDB的调用将要依靠HTTP请求的方式进行. 1.毫秒级数据写入 /api/put:通过POST方式插入JSON格式 ...