JavaScript如何处理移动端拍摄图片旋转问题
本文实例为大家分享了js移动端拍摄图片旋转的具体代码，供大家参考，具体内容如下
第一步：引入exif-js
第二步：
/**
*处理图片文件（处理移动端拍摄图片旋转问题）
*fileObj.file图片文件独享
*fileObj.resolution在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。
*fileObj.fileType输入的文件类型，1file对象，2blob对象，3base64字符串
*fileObj.fileName输出的文件名称，默认为picture.jpeg
*fileObj.callback回调函数
*/
functionhandleImageFile(fileObj){
//给参数附初始值
fileObj.fileName=fileObj.hasOwnProperty("fileName")?"images/"+fileObj.fileName:"images/picture.jpeg";
//获取文件类型
varfType=fileObj.file.type;
if(fType.indexOf("image")===-1)returnfileObj.callback({
status:500,
message:"文件类型不正确",
data:null
});
if(!EXIF)returnfileObj.callback({
status:500,
message:"EXIF不存在",
data:null
});
if(fileObj.file){
//获取照片方向角属性，用户旋转控制
EXIF.getData(fileObj.file,function(){
varorientation=EXIF.getTag(this,'Orientation');
varoReader=newFileReader();
oReader.onload=function(e){
varimage=newImage();
image.src=e.target.result;
image.onload=function(){
varcanvas=document.createElement("canvas");
varctx=canvas.getContext("2d");
varresultFile=null;
varua=navigator.userAgent;
canvas.width=this.naturalWidth;
canvas.height=this.naturalHeight;
ctx.drawImage(this,0,0,this.naturalWidth,this.naturalHeight);
//android终端
varisAdr=ua.indexOf("Android")>-1||ua.indexOf("Adr")>-1;
//ios终端
varisIOS=ua.indexOf("iPhone")>-1||ua.indexOf("iOS")>-1;
//修复ios或Android
if(isIOS||isAdr){
//如果方向角不为1，都需要进行旋转
if(orientation&&orientation!==""&&orientation!==1){
switch(orientation){
case6://需要顺时针（向左）90度旋转
rotateImg(this,"left",canvas);
break;
case8://需要逆时针（向右）90度旋转
rotateImg(this,"right90",canvas);
break;
case3://需要180度旋转，转两次
rotateImg(this,"right180",canvas);
break;
}
}
resultFile=canvas.toDataURL("image/jpeg",fileObj.resolution);
}else{
resultFile=canvas.toDataURL("image/jpeg",fileObj.resolution);
}
switch(fileObj.fileType){
case1:
case2:
fileObj.callback({
status:200,
message:"success",
data:dataURLtoFile(resultFile,fileObj.fileType,fileObj.fileName)
});
break;
case3:
fileObj.callback({
status:200,
message:"success",
data:resultFile
});
break;
default:
break;
}
};
};
oReader.readAsDataURL(fileObj.file);
});
}else{
returnfileObj.callback({
status:500,
message:"文件不存在",
data:null
});
}
/**
*旋转图片
*/
functionrotateImg(img,direction,canvas){
if(img===null)return;
//最小与最大旋转方向，图片旋转4次后回到原方向
varminStep=0;
varmaxStep=3;
//img的高度和宽度不能在img元素隐藏后获取，否则会出错
varwidth=img.width;
varheight=img.height;
varstep=2;
if(step===null)step=minStep;
if(direction==="right90"){
step++;
step>maxStep&&(step=minStep);
}elseif(direction==="right180"){
step=2;
}else{
step--;
step
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。