查看: 5904|回复: 0

[IOS开发教程] IOS中html5上传图片方向问题解决方法

发表于 2016-4-17 11:55:15
尚学堂AD

用html5编写图片裁切上传,在iphone手机上可能会遇到图片方向错误问题,在此把解决方法和大家分享一下,
用到了html5的 FileReader和Canvas,如果还没有接触的同学,先了解一下其方法。

  1. //此方法为file input元素的change事件
  2. function change(){
  3. var file = this.files[0];
  4. var orientation;
  5. //EXIF js 可以读取图片的元信息 https://github.com/exif-js/exif-js
  6. EXIF.getData(file,function(){
  7. orientation=EXIF.getTag(this,'Orientation');
  8. });
  9. var reader = new FileReader();
  10. reader.onload = function(e) {
  11. getImgData(this.result,orientation,function(data){
  12. //这里可以使用校正后的图片data了
  13. });
  14. }
  15. reader.readAsDataURL(file);
  16. }
复制代码
  1. // @param {string} img 图片的base64
  2. // @param {int} dir exif获取的方向信息
  3. // @param {function} next 回调方法,返回校正方向后的base64
  4. function getImgData(img,dir,next){
  5. var image=new Image();
  6. image.onload=function(){
  7. var degree=0,drawWidth,drawHeight,width,height;
  8. drawWidth=this.naturalWidth;
  9. drawHeight=this.naturalHeight;
  10. //以下改变一下图片大小
  11. var maxSide = Math.max(drawWidth, drawHeight);
  12. if (maxSide > 1024) {
  13. var minSide = Math.min(drawWidth, drawHeight);
  14. minSide = minSide / maxSide * 1024;
  15. maxSide = 1024;
  16. if (drawWidth > drawHeight) {
  17. drawWidth = maxSide;
  18. drawHeight = minSide;
  19. } else {
  20. drawWidth = minSide;
  21. drawHeight = maxSide;
  22. }
  23. }
  24. var canvas=document.createElement('canvas');
  25. canvas.width=width=drawWidth;
  26. canvas.height=height=drawHeight;
  27. var context=canvas.getContext('2d');
  28. //判断图片方向,重置canvas大小,确定旋转角度,iphone默认的是home键在右方的横屏拍摄方式
  29. switch(dir){
  30. //iphone横屏拍摄,此时home键在左侧
  31. case 3:
  32. degree=180;
  33. drawWidth=-width;
  34. drawHeight=-height;
  35. break;
  36. //iphone竖屏拍摄,此时home键在下方(正常拿手机的方向)
  37. case 6:
  38. canvas.width=height;
  39. canvas.height=width;
  40. degree=90;
  41. drawWidth=width;
  42. drawHeight=-height;
  43. break;
  44. //iphone竖屏拍摄,此时home键在上方
  45. case 8:
  46. canvas.width=height;
  47. canvas.height=width;
  48. degree=270;
  49. drawWidth=-width;
  50. drawHeight=height;
  51. break;
  52. }
  53. //使用canvas旋转校正
  54. context.rotate(degree*Math.PI/180);
  55. context.drawImage(this,0,0,drawWidth,drawHeight);
  56. //返回校正图片
  57. next(canvas.toDataURL("image/jpeg",.8));
  58. }
  59. image.src=img;
  60. }
复制代码


回复

使用道具 举报