查看: 653|回复: 0

[其他分享] IOS中html5上传图片方向问题解决方法


16-4-18 13:52:39 | [复制链接]

12

主题

198

帖子

451

积分

牛人

Rank: 3Rank: 3

发表于 16-4-18 13:52:39 | 显示全部楼层 |阅读模式
IOS中html5上传图片方向问题解决方法

  用html5编写图片裁切上传,在iphone手机上可能会遇到图片方向错误问题,在此把解决方法和大家分享一下,

  用到了html5的 FileReader和Canvas,如果还没有接触的同学,先了解一下其方法。

  //此方法为file input元素的change事件

  function change(){

  var file = this.files[0];

  var orientation;

  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;

  }  //此方法为file input元素的change事件

  function change(){

  var file = this.files[0];

  var orientation;

  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;

  }



您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

订阅|小黑屋|手机版|千锋教育论坛 ( 京ICP备12003911号-3 )

GMT+8, 20-7-8 11:24 , Processed in 0.279588 second(s), 41 queries .

Powered by Discuz! X3.2

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表