介绍
这篇文章主要介绍了怎么解决IOS中html5上传图片方向问题,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
用html5编写图片裁切上传,在iphone手机上可能会遇到图片方向错误问题,在此把解决方法和大家分享一下,
用到了html5的FileReader和画布,如果还没有接触的同学,先了解一下其方法。
//此方法为文件输入元素的改变事件
函数改变(){
var文件=this.files [0];
var取向;//EXIF js可以读取图片的元信息https://github.com/exif-js/exif-js
EXIF.getData(文件,函数(){
取向=EXIF.getTag(这个,& # 39;方向# 39;);
});
var=new FileReader读者();
读者。onload=function (e) {
getImgData (this.result、定位、功能(数据){//这里可以使用校正后的图片数据了
});
}
reader.readAsDataURL(文件);
} //@param{字符串}img图片的base64//@param {int} dir exif获取的方向信息//@param{函数}下一个回调方法,返回校正方向后的base64
函数getImgData (img, dir,下一个){
var=新形象形象();
image.onload=function () {
var程度=0,drawWidth drawHeight,宽度,高度;
drawWidth=this.naturalWidth;
drawHeight=this.naturalHeight;//以下改变一下图片大小
var maxSide=数学。马克斯(drawWidth drawHeight);
如果(maxSide比;1024){
var minSide=数学。min (drawWidth drawHeight);
minSide=minSide/maxSide * 1024;
maxSide=1024;
如果(drawWidth比;drawHeight) {
drawWidth=maxSide;
drawHeight=minSide;
其他}{
drawWidth=minSide;
drawHeight=maxSide;
}
}
画布var=document.createElement(& # 39;帆布# 39;);
canvas.width==drawWidth宽度;
canvas.height=身高=drawHeight;
var=canvas.getContext上下文(& # 39;2 d # 39;);//判断图片方向,重置帆布大小,确定旋转角度,iphone默认的是家里键在右方的横屏拍摄方式
开关(dir) {//iphone横屏拍摄,此键时家里在左侧
案例3:
度=180;
drawWidth=- width;
drawHeight=身高;
打破;//iphone竖屏拍摄,此键时家里在下方(正常拿手机的方向)
例6:
canvas.width=身高;
canvas.height=宽度;
度=90;
drawWidth=宽度;
drawHeight=身高;
打破;//iphone竖屏拍摄,此键时回家在上方
例8:
canvas.width=身高;
canvas.height=宽度;
度=270;
drawWidth=- width;
drawHeight=身高;
打破;
}//使用帆布旋转校正
context.rotate(学位* Math.PI/180);
context.drawImage (0, 0, drawWidth drawHeight);//返回校正图片
下一个(canvas.toDataURL(“图像/jpeg"。8));
}
image.src=https://www.yisu.com/zixun/img;
} 感谢你能够认真阅读完这篇文章,希望小编分享怎么解决IOS中html5上传图片方向问题内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!
