我是靠谱客的博主 健忘紫菜,最近开发中收集的这篇文章主要介绍如何解决IOS中html5上传图片方向问题?,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

这篇文章主要介绍了IOS中html5上传图片方向问题解决方法的相关资料,需要的朋友可以参考下

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

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//此方法为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); }
登录后复制
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
// @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; }
登录后复制

以上就是如何解决IOS中html5上传图片方向问题?的详细内容,更多请关注靠谱客其它相关文章!

最后

以上就是健忘紫菜为你收集整理的如何解决IOS中html5上传图片方向问题?的全部内容,希望文章能够帮你解决如何解决IOS中html5上传图片方向问题?所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(68)

评论列表共有 0 条评论

立即
投稿
返回
顶部