js解决ios手机上传竖拍照片旋转90度问题

已于 2022-08-08 14:15:31 修改
阅读量869 收藏
点赞数
分类专栏： javascript 文章标签： javascript 开发语言 ecmascript
于 2022-08-08 14:15:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zjwlgr/article/details/126226648
版权
该博客介绍了如何使用HTML5和Canvas解决iOS设备上传照片时出现的旋转问题，通过exif.js读取照片Orientation属性来判断并修正旋转角度。同时，代码中还包含了图片压缩的功能，确保在不同设备上的兼容性和图片质量控制。
摘要由CSDN通过智能技术生成

HTML5+canvas进行移动端手机照片上传时，发现iOS手机上传竖拍照片会逆时针旋转90度，横拍照片无此问题；Android手机没这个问题。

因此解决这个问题的思路是：获取到照片拍摄的方向角，对非横拍的ios照片进行角度旋转修正。

利用exif.js读取照片的拍摄信息，详见  http://code.ciaoca.com/javascript/exif-js/

这里主要用到Orientation属性。

Orientation属性说明如下：

旋转角度 参数

0° 1

顺时针90°  6

逆时针90°  8

180°    3

下面就直接上代码了。

主要有Html5页面和一个js，示例功能包含了图片压缩和旋转。

自己写的是uploadImage.js。

html5测试页面如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!DOCTYPE html>  

<html>  

<head>  

    <meta charset="utf-8">  

    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  

    <title>图片上传</title>  

    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>  

    <script type="text/javascript" src="js/uploadPicture/uploadImage.js" ></script>  

        <script type="text/javascript" src="http://form1.cn/public/js/exif.js" ></script>  

    <script>  

   

    </script>  

</head>  

<body>  

    <div style="height: 50px; line-height: 50px;text-align: center;border-bottom: 1px solid #171E28;">  

            上传图片:  

            <input type="file" accept="image/*" id="uploadImage" capture="camera" onchange="selectFileImage(this);" />  

        </div>  

        <div style="margin-top: 10px;">  

            <img alt="preview" src="" id="myImage"/>  

        </div>  

</body>  

</html>

uploadImage.js如下：

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

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

function selectFileImage(fileObj) {  

    var file = fileObj.files['0'];  

    //图片方向角 added by lzk  

    var Orientation = null;  

       

    if (file) {  

        //console.log("正在上传,请稍后...");  

        var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式  

        if (!rFilter.test(file.type)) {  

            //showMyTips("请选择jpeg、png格式的图片", false);  

            return;  

        }  

        // var URL = URL || webkitURL;  

        //获取照片方向角属性，用户旋转控制  

        EXIF.getData(file, function() {  

           // alert(EXIF.pretty(this));  

            EXIF.getAllTags(this);   

            //alert(EXIF.getTag(this, 'Orientation'));   

            Orientation = EXIF.getTag(this, 'Orientation');  

            //return;  

        });  

           

        var oReader = new FileReader();  

        oReader.onload = function(e) {  

            //var blob = URL.createObjectURL(file);  

            //_compress(blob, file, basePath);  

            var image = new Image();  

            image.src = e.target.result;  

            image.onload = function() {  

                var expectWidth = this.naturalWidth;  

                var expectHeight = this.naturalHeight;  

                   

                if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {  

                    expectWidth = 800;  

                    expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;  

                } else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {  

                    expectHeight = 1200;  

                    expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;  

                }  

                var canvas = document.createElement("canvas");  

                var ctx = canvas.getContext("2d");  

                canvas.width = expectWidth;  

                canvas.height = expectHeight;  

                ctx.drawImage(this, 0, 0, expectWidth, expectHeight);  

                var base64 = null;  

                //修复ios  

                if (navigator.userAgent.match(/iphone/i)) {  

                    //console.log('iphone');  

                    //alert(expectWidth + ',' + expectHeight);  

                    //如果方向角不为1，都需要进行旋转 added by lzk  

                    if(Orientation != "" && Orientation != 1){  

                        alert('旋转处理');  

                        switch(Orientation){  

                            case 6://需要顺时针（向左）90度旋转  

                                alert('需要顺时针（向左）90度旋转');  

                                rotateImg(this,'left',canvas);  

                                break;  

                            case 8://需要逆时针（向右）90度旋转  

                                alert('需要顺时针（向右）90度旋转');  

                                rotateImg(this,'right',canvas);  

                                break;  

                            case 3://需要180度旋转  

                                alert('需要180度旋转');  

                                rotateImg(this,'right',canvas);//转两次  

                                rotateImg(this,'right',canvas);  

                                break;  

                        }         

                    }  

                       

                    /*var mpImg = new MegaPixImage(image); 

                    mpImg.render(canvas, { 

                        maxWidth: 800, 

                        maxHeight: 1200, 

                        quality: 0.8, 

                        orientation: 8 

                    });*/  

                    base64 = canvas.toDataURL("image/jpeg", 0.8);  

                }else if (navigator.userAgent.match(/Android/i)) {// 修复android  

                    var encoder = new JPEGEncoder();  

                    base64 = encoder.encode(ctx.getImageData(0, 0, expectWidth, expectHeight), 80);  

                }else{  

                    //alert(Orientation);  

                    if(Orientation != "" && Orientation != 1){  

                        //alert('旋转处理');  

                        switch(Orientation){  

                            case 6://需要顺时针（向左）90度旋转  

                                alert('需要顺时针（向左）90度旋转');  

                                rotateImg(this,'left',canvas);  

                                break;  

                            case 8://需要逆时针（向右）90度旋转  

                                alert('需要顺时针（向右）90度旋转');  

                                rotateImg(this,'right',canvas);  

                                break;  

                            case 3://需要180度旋转  

                                alert('需要180度旋转');  

                                rotateImg(this,'right',canvas);//转两次  

                                rotateImg(this,'right',canvas);  

                                break;  

                        }         

                    }  

                       

                    base64 = canvas.toDataURL("image/jpeg", 0.8);  

                }  

                //uploadImage(base64);  

                $("#myImage").attr("src", base64);  

            };  

        };  

        oReader.readAsDataURL(file);  

    }  

}  

   

//对图片旋转处理 added by lzk  

function rotateImg(img, direction,canvas) {    

        //alert(img);  

        //最小与最大旋转方向，图片旋转4次后回到原方向    

        var min_step = 0;    

        var max_step = 3;    

        //var img = document.getElementById(pid);    

        if (img == null)return;    

        //img的高度和宽度不能在img元素隐藏后获取，否则会出错    

        var height = img.height;    

        var width = img.width;    

        //var step = img.getAttribute('step');    

        var step = 2;    

        if (step == null) {    

            step = min_step;    

        }    

        if (direction == 'right') {    

            step++;    

            //旋转到原位置，即超过最大值    

            step > max_step && (step = min_step);    

        } else {    

            step--;    

            step < min_step && (step = max_step);    

        }    

        //img.setAttribute('step', step);    

        /*var canvas = document.getElementById('pic_' + pid);   

        if (canvas == null) {   

            img.style.display = 'none';   

            canvas = document.createElement('canvas');   

            canvas.setAttribute('id', 'pic_' + pid);   

            img.parentNode.appendChild(canvas);   

        }  */  

        //旋转角度以弧度值为参数    

        var degree = step * 90 * Math.PI / 180;    

        var ctx = canvas.getContext('2d');    

        switch (step) {    

            case 0:    

                canvas.width = width;    

                canvas.height = height;    

                ctx.drawImage(img, 0, 0);    

                break;    

            case 1:    

                canvas.width = height;    

                canvas.height = width;    

                ctx.rotate(degree);    

                ctx.drawImage(img, 0, -height);    

                break;    

            case 2:    

                canvas.width = width;    

                canvas.height = height;    

                ctx.rotate(degree);    

                ctx.drawImage(img, -width, -height);    

                break;    

            case 3:    

                canvas.width = height;    

                canvas.height = width;    

                ctx.rotate(degree);    

                ctx.drawImage(img, -width, 0);    

                break;    

        }    

    }

最终会以base64的方式显示图片

编程工人
关注
专栏目录
通过exif.js简单处理手机照片拍摄图片旋转问题
weixin_48349367的博客
06-11 1618
在移动端拍照获取图片后，然后使用canvas压缩图片，有时我们会发现输出的图片是旋转过的。 其实当我们旋转手机拍照的时候，就会产生一个角度问题，生成的图片都会有EXIF meta data。然后我们可以通过一个js插件[exif-js]来读取图片的EXIF meta data中的角度数值，再通过canvas对图片进行旋转处理，这样我们就可以输出正常角度的图片了。 具体的EXIF meta data可以参考如下：http://www.impulseadventure.com/photo/exif-orient
利用exif.js解决ios手机上传竖拍照片旋转90度问题
热门推荐
技术学习与分享
09-22 7万+
html5+canvas进行移动端手机照片上传时，发现ios手机上传竖拍照片会逆时针旋转90度，横拍照片无此问题；Android手机没这个问题。 因此解决这个问题的思路是：获取到照片拍摄的方向角，对非横拍的ios照片进行角度旋转修正。 利用exif.js读取照片的拍摄信息，详见  http://code.ciaoca.com/javascript/exif-js/ 这里主要用到Orienta
ios 图片逆时针旋转_解决HTML5IOS拍照上传图片逆时针旋转90度问题(React)
weixin_39599097的博客
12-28 216
uploadImg = (formData) =>{const xhr = newXMLHttpRequest();//进度监听//xhr.upload.addEventListener('progress', (e)=>{console.log(e.loaded / e.total)}, false);//加载监听//xhr.addEventListener('load', ()=...
UIImage的imageOrientation属性（app中图片旋转了的bug）
不积跬步 无以至千里 不积小流 无以成江海
11-05 335
UIImage有一个imageOrientation的属性，主要作用是控制image的绘制方向，共有以下8中方向 //UIImageOrientation的定义，定义了如下几种变换 typedef enum { UIImageOrientationUp, // default orientation &amp;nbsp;UIImageOrie...
JS实现图片90度旋转
朱远辉的博客
04-25 1194
【代码】JS实现图片90度旋转。
利用exif.js插件解决ios手机上传竖拍照片旋转90度问题
肖肖肖丽珠的博客
04-13 4376
移动端手机照片上传时，发现iOS手机上传竖拍照片会逆时针旋转90度，横拍照片无此问题；Android手机没这个问题。 因此解决这个问题的思路是：获取到照片拍摄的方向角，对非横拍的ios照片进行角度旋转修正。 Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展，例如：拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。我们可以通过通过这个插件
使用exif.js修复iOS竖拍照片上传旋转问题
"本文主要介绍了如何使用exif.js来解决iOS手机在上传竖拍照片时出现的90度旋转问题。在HTML5结合canvas处理移动端照片上传的过程中，iOS设备的竖拍照片会自动逆时针旋转90度，而Android设备则没有此问题。为了解决这...
iOS 解决图片上传到服务器旋转90度的问题（图片倒置）
xuan2717的博客
10-08 180
iOS 解决图片上传到服务器旋转90度的问题（图片倒置）
iOS拍照后图片自动旋转90度的完美解决方法
08-31
今天开发一个拍照获取照片的功能的时候, 发现上传之后图片会自动旋转90.在测试中发现只要是图片大于2M, 系统就会自动翻转照片。下面小编通过本文给大家分享下解决办法
php ios上传图片旋转,上传图片解决ios端图片旋转90度问题
weixin_35968240的博客
03-17 189
前一阵做的上传图片人脸识别的功能，测试人员告诉我说ios手机上传到后台，发现图片反转了90度，以前听说过这个问题，现在遇到了。为了能尽快解决这个问题(偷懒)，百度了一下，雾草，坑的不要不要的，在此呼吁一下，开发者别把半吊子代码发到网上，很容易误导人的有木有。废话不多说=>//此处省略HTMLvar Orientation = null;var canvasHead = '';$('#file...
JS实现图片旋转90度
zhangchb的博客
05-29 2万+
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;图片旋转&lt;/title&gt; &lt;script&gt; window.onload = function(){ var current = 0; document.getElement...
利用exif.js解决ios或Android手机上传竖拍照片旋转90度问题
weixin_46020146的博客
07-12 80
利用exif.js解决ios或Android手机上传竖拍照片旋转90度问题
JS实现图片左右旋转90度
u013899802的博客
09-23 8973
话不多说，直接上代码，可以直接复制到html文件运行看效果 代码如下： <html> <head> <title>旋转图片</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&g
解决ios手机上传竖拍照片旋转90度的问题
weixin_30606461的博客
10-05 455
html5+canvas进行移动端手机照片上传时，发现ios手机上传竖拍照片会逆时针旋转90度，横拍照片无此问题；Android手机没这个问题。 因此解决这个问题的思路是：获取到照片拍摄的方向角，对非横拍的ios照片进行角度旋转修正。 这里主要利用exif.js读取照片的拍摄信息。 Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展，例如：拍照方向、相机设备型号、...
exif.js解决ios手机上传照片后显示为旋转90度问题
最新发布
n1234567896的博客
06-14 898
然而我发现大家好像都默认浏览器不会对带 EXIF 信息的图片进行回正，当然之前确实不会。但是自从 iOS 更新到 13.4.1 后，浏览器支持自动回正了。在做手机移动端app时，发现iOS12.5.1版本（iphone6）上传照片出现顺时针旋转90问题，iphone11倒是正常，最后发现。转载于：https://blog.csdn.net/a460550542/article/details/129320703。2.在对应的vue模块引入：import EXIF from “exif-js”;
IOS上传图片旋转90度问题出现原因及解决方案
diqianqiao7856的博客
07-01 847
出现这种情况的原因： iPhone对拍摄的照片附加了EXIF信息（如镜头、光圈、快门、焦距、相机拍摄角度等），图片被上传后自动根据相机拍摄角度做了旋转。 那么解决方案就是根据图像EXIF信息中的相机拍摄角度（Orientation），再旋转回来就OK了。 php库函数exif_read_data()提供了读取jpg\tiff图像EXIF信息的功能，函数返回数组中的Orientati...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程工人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值