这篇文章主要介绍了IOS中html5上传图片方向问题解决方法的相关资料,需要的朋友可以参考下
用html5编写图片裁切上传,在iphone手机上可能会遇到图片方向错误问题,在此把解决方法和大家分享一下,
用到了html5的 FileReader和Canvas,如果还没有接触的同学,先了解一下其方法。
//此方法为file input元素的change事件
function change(){
var file = this.files[0];
var orientation;
//EXIF js 可以读取图片的元信息 https://github.com/exif-js/exif-js
EXIF.getData(file,function(){
orientation=EXIF.getTag(this,'Orientation');
});
var reader = new FileReader();
reader.onload = function(e) {
getImgData(this.result,orientation,function(data){
//这里可以使用校正后的图片data了
});
}
reader.readAsDataURL(file);
}登录后复制
// @param {string} img 图片的base64
// @param {int} dir exif获取的方向信息
// @param {function} next 回调方法,返回校正方向后的base64
function getImgData(img,dir,next){
var image=new Image();
image.onload=function(){
var degree=0,drawWidth,drawHeight,width,height;
drawWidth=this.naturalWidth;
drawHeight=this.naturalHeight;
//以下改变一下图片大小
var maxSide = Math.max(drawWidth, drawHeight);
if (maxSide > 1024) {
var minSide = Math.min(drawWidth, drawHeight);
minSide = minSide / maxSide * 1024;
maxSide = 1024;
if (drawWidth > drawHeight) {
drawWidth = maxSide;
drawHeight = minSide;
} else {
drawWidth = minSide;
drawHeight = maxSide;
}
}
var canvas=document.createElement('canvas');
canvas.width=width=drawWidth;
canvas.height=height=drawHeight;
var context=canvas.getContext('2d');
//判断图片方向,重置canvas大小,确定旋转角度,iphone默认的是home键在右方的横屏拍摄方式
switch(dir){
//iphone横屏拍摄,此时home键在左侧
case 3:
degree=180;
drawWidth=-width;
drawHeight=-height;
break;
//iphone竖屏拍摄,此时home键在下方(正常拿手机的方向)
case 6:
canvas.width=height;
canvas.height=width;
degree=90;
drawWidth=width;
drawHeight=-height;
break;
//iphone竖屏拍摄,此时home键在上方
case 8:
canvas.width=height;
canvas.height=width;
degree=270;
drawWidth=-width;
drawHeight=height;
break;
}
//使用canvas旋转校正
context.rotate(degree*Math.PI/180);
context.drawImage(this,0,0,drawWidth,drawHeight);
//返回校正图片
next(canvas.toDataURL("image/jpeg",.8));
}
image.src=img;
}登录后复制
【说明】:本文章由站长整理发布,文章内容不代表本站观点,如文中有侵权行为,请与本站客服联系(QQ:254677821)!
【说明】:本文章由站长整理发布,文章内容不代表本站观点,如文中有侵权行为,请与本站客服联系(QQ:254677821)!
相关教程推荐
- H5的canvas实现贪吃蛇小游戏
- H5如何做出碎片式的图片切换
- H5的服务器推送事件详解
- Canvas实现旋转风车的绘制
- H5的拖放功能详解
- phonegap播放音频详解
- H5添加语音输入功能
- H5的头部meta标签如何使用
- 关于老版本的浏览器不兼容H5和C3的处理方法
- HTML5的data-*自定义属性是什么
- Dreamweaver中设置html网页段落行间距的方法指导
- AugularJS基础入门与实践
- 带你了解什么是HTML5?
- 利用Html5实现文件异步上传功能代码实例
- HTML5canvas实现中奖转盘的实例代码
- 常用的<meta>代码整理汇总
- JS之原生数组splice方法实例
- 如何解决滚动条样式问题
- v-for怎么加载本地静态图片
- html5不常用标签可以怎么使用?
其他课程推荐
- ASP连接读写ACCESS数据库实例(转)
- ASP使用MYSQL数据库全攻略
- 使用ODBC数据库管理Serv-U的FTP用户及相关ASP编程[附源码示例下载]
- ADO存取数据库时如何分页显示
- ASP获取数据库表名、库名、字段名的方法
- asp+Access通用的自动替换数据库中的字符串
- 非常好用的asp备份,还原SQL数据库的代码
- ASP 包含文件中的路径问题和使用单一数据库连接文件的解决方案
- 动网论坛的asp 数据库连接代码
- ASP与数据库,有用的代码(转贴,摘贴)
- 用asp实现访问远程计算机上MDB access数据库文件的方法
- 非常不错的列出sql服务器上所有数据库的asp代码
- Asp数据库连接出错,请检查Conn.asp文件中的数据库参数设置
- &lt;asp:DropDownList数据库读取
- asp 数据库 模块化 - 思路是没一个页面有一个自己的数据类 这里用nPath表示
- 用Asp备份与恢复SQL Server 数据库
- ASP+ACCESS数据库中文乱码问题解决
- 【ASP】连接Access数据库的登陆系统
- 技巧文章:实用的ASP连接数据库的函数
- asp获取数据库中表名和字段名的代码