摘要:用HTML5编写图片裁切上传,在iphone手机上可能会遇到图片方向错误问题,本文把解决方法和大家分享一下,希望阅读本篇文章以后大家有所收获,帮助大家对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; }
本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML5/CSS3频道,获取更多WEB前端知识!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号