web前端|H5教程
IOS，Shtml5，上传图片
web前端-H5教程用html5编写图片裁切上传，在iphone手机上可能会遇到图片方向错误问题，在此把解决方法和大家分享一下，
用到了html5的 FileReader和Canvas，如果还没有接触的同学，先了解一下其方法。
安卓程序源码 毕业设计,ubuntu子接口组网,服务器Tomcat后空白页,python爬虫结果展示,php微信小程序开发教程学习,前端项目seolzw
//此方法为file input元素的change事件 function change(){ var file = this.files[0]; var orientation; //EXIF js 可以读取图片的元信息 /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 回调方法，返回校正方向后的base64function 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;}
gg 源码教程,ubuntu 查杀进程,tomcat无法访问网站,跨页面爬虫,php阿里大鱼3.0,吉安seo网络推广一般多少钱lzw
