iphone手机html5上传图片方向问题解决
时间:2022-03-12 23:08
用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;
}
相关推荐
- Android系统编程入门系列之界面Activity交互响应
- 新型横向移动工具原理分析、代码分析、优缺点以及检测方案
- uni-app滚动视图容器(scroll-view)之监听上拉事件
- uniapp h5,app两端复制文本
- Android系统编程入门系列之界面Activity响应丝滑的传统动画
- 【Azure 应用服务】App Service 配置 Application Settings 访问Storage Account得到 could not be resolved: '*.file.core.windows.net'的报错。没有解析成对应中国区 Storage Account地址 *.file.core.chinacloudapi.cn
- 诺基亚短信生成!太好玩了
- iOS 跳转App Store进行评分
- 开发一个即时通讯App
- 关闭苹果IOS app自动更新
电脑软件
本类排行
- 1关闭苹果IOS app自动更新
- 2iOS 跳转App Store进行评分
- 3诺基亚短信生成!太好玩了
- 4Android系统编程入门系列之界面Activity响应丝滑的传统动画
- 5uniapp h5,app两端复制文本
- 6uni-app滚动视图容器(scroll-view)之监听上拉事件
- 7新型横向移动工具原理分析、代码分析、优缺点以及检测方案
- 8Android系统编程入门系列之界面Activity交互响应
- 9开发一个即时通讯App
- 10【Azure 应用服务】App Service 配置 Application Settings 访问Storage Account得到 could not be resolved: '*.file.core.windows.net'的报错。没有解析成对应中国区 Storage Account地址 *.file.core.chinacloudapi.cn