모바일 사진 촬영하여 업로드시 익스플로러 사진회전현상
2020. 12. 16. 13:31ㆍ개발하는중/javascript or jquery
728x90
반응형
웹앱 모바일로 사진촬영하여 업로드하여 서버 저장 후 익스플러로 에서 사진 url 조회시에
사진이 회전 되는 현상있어 url 이미지 객체로 변환하여 회전하고 이미지출력시켜줍니다
그냥띄어주는 img태그와 페이지 로드시 돌려줄 img
|
1
2
3
4
5
6
7
8
9
10
11
|
<script type="text/javascript" src="/resources/front/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/resources/front/js/load-image.all.min.js"></script>
<script type="text/javascript" src="/resources/front/js/exif.js"></script>
<h3>EXIF - Orientation 값 적용 </h3>
<hr/>
<img id="thumbnailImg" src="http://localhost:8080/img/4c54d443c3b743c9a16d960c7ec5f3d3.jpg" style="width:50%;height:auto;">
<hr/>
<h3>다이렉트로 띄우기</h3>
<img src="http://localhost:8080/img/4c54d443c3b743c9a16d960c7ec5f3d3.jpg" style="width:50%;height:auto;" id="temp1">
|
cs |
db에서 파일 경로 조회하여 페이지 로드시 url 객체화 하여 이미지 회전 시켜준다
|
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
|
<script type="text/javascript">;
$(document).ready(function(){
const browser = isBrowserCheck();
console.log("browser", browser);
var url = "";
if(browser == "Mozilla"){
url = "http://localhost:8080/img/4c54d443c3b743c9a16d960c7ec5f3d3.jpg";
toDataURL(url, function(dataUrl) {
console.log('RESULT:', dataUrl);
var fileInfo = dataURLtoFile(dataUrl, "imageName.jpg");
console.log('fileInfo:', fileInfo);
// @breif 업로드 파일 읽기
var reader = new FileReader();
// @details readAsDataURL( )을 통해 파일을 읽어 들일때 onload가 실행
reader.onload = function() {
console.log( reader.result );
document.getElementById( "thumbnailImg" ).src = reader.result;
EXIF.getData( fileInfo, function(){
var orientation = EXIF.getTag( fileInfo, "Orientation" );
console.log( orientation );
switch( orientation ) {
// @details 이미지 회전값이 0인경우 ( 정방향 )
case 1 :
document.getElementById( "thumbnailImg" ).style.transform = "rotate( 0deg )";
break;
// @details 이미지 회전값이 180 기운 경우
case 3 :
document.getElementById( "thumbnailImg" ).style.transform = "rotate( 180deg )";
break;
// @details 이미지 회전값이 270 기운 경우 ( 왼쪽으로 90 기운 경우 )
case 6 :
document.getElementById( "thumbnailImg" ).style.transform = "rotate( 90deg )";
break;
// @details 이미지 회전값이 90 기운 경우
case 8 :
document.getElementById( "thumbnailImg" ).style.transform = "rotate( 270deg )";
break;
}
});
};
if( fileInfo ) {
// @details readAsDataURL( )을 통해 파일의 URL을 읽어온다.
reader.readAsDataURL( fileInfo );
}
});
}
});
function toDataURL(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
}
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var File = window.File;
try {
new File([], '');
} catch (e) {
File = function (_Blob) {
_inherits(File, _Blob);
function File(chunks, filename) {
var opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
_classCallCheck(this, File);
var _this = _possibleConstructorReturn(this, _Blob.call(this, chunks, opts));
_this.lastModifiedDate = new Date();
_this.lastModified = +_this.lastModifiedDate;
_this.name = filename;
return _this;
}
return File;
}(Blob);
}
function isBrowserCheck(){
const agt = navigator.userAgent.toLowerCase();
if (agt.indexOf("chrome") != -1) return 'Chrome';
if (agt.indexOf("opera") != -1) return 'Opera';
if (agt.indexOf("staroffice") != -1) return 'Star Office';
if (agt.indexOf("webtv") != -1) return 'WebTV';
if (agt.indexOf("beonex") != -1) return 'Beonex';
if (agt.indexOf("chimera") != -1) return 'Chimera';
if (agt.indexOf("netpositive") != -1) return 'NetPositive';
if (agt.indexOf("phoenix") != -1) return 'Phoenix';
if (agt.indexOf("firefox") != -1) return 'Firefox';
if (agt.indexOf("safari") != -1) return 'Safari';
if (agt.indexOf("skipstone") != -1) return 'SkipStone';
if (agt.indexOf("netscape") != -1) return 'Netscape';
if (agt.indexOf("mozilla/5.0") != -1) return 'Mozilla';
if (agt.indexOf("msie") != -1) {
let rv = -1;
if (navigator.appName == 'Microsoft Internet Explorer') {
let ua = navigator.userAgent; var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat(RegExp.$1);
}
return 'Internet Explorer '+rv;
}
}
</script>
|
cs |
728x90
'개발하는중 > javascript or jquery' 카테고리의 다른 글
| select box 동적으로 생성,삭제,선택 하기! (0) | 2021.01.21 |
|---|---|
| radio 동적으로 생성,삭제,체크 하기! (0) | 2021.01.21 |
| checkbox 동적으로 생성,삭제,체크 하기! (0) | 2021.01.21 |
| javascript 현재날짜 구하기 (0) | 2021.01.13 |
| 동적 onclick 이벤트 (0) | 2020.12.16 |