广

IOS开发

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

    IOS中html5上传图片方向问题解决方法

    2018-04-06 10:42:24 次阅读 稿源:互联网
    广告

    用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 回调方法,返回校正方向后的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;}

    一起学吧部分文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与一起学吧进行文章共享合作。

    广告
    广告
    广告