얼마 전 회사에서 Vue를 이용해 웹앱을 개발하던 중, 사진을 찍거나 휴대폰 앨범에 전화를 걸어 사진을 표시한 뒤 불과 반년 만에 서버에 업로드하는 사용자를 만났습니다. 프론트엔드 작업을 하면서 나는 함정으로 가득 찬 길을 시작했습니다. 아래에서 내가 겪었던 함정에 대해 이야기하겠습니다.
다양한 함정 요약
모바일 사진첩 불러오기
iOS는 문제 없지만 안드로이드폰은 정말 함정이 많아서 검색해봤습니다. 온라인에서는 휴대전화가 작동하지 않는 경우도 있습니다. 사진 앨범만 조정할 수 있지만 카메라는 조정할 수 없거나, 카메라만 조정할 수 있지만 사진 앨범은 조정할 수 없습니다.
사진을 받은 후 사진 앨범을 호출하고 인터페이스에 렌더링하면 iOS가 다시 나타납니다. 문제는 카메라로 찍은 사진이 90도 회전되거나, 애플의 일반 사진이 안드로이드에서 표시될 때 90도 회전되는 것입니다. 휴대폰 및 Apple에서 일반적으로 사용되는 일부 사진은 배경에서 왜곡됩니다. iOS 개발자로서 저는 이것을 여러 번 조사한 끝에 Apple의 카메라가 비뚤어져 있다는 결론에 도달했습니다.
이미지가 렌더링된 후 브라우저가 충돌합니다. 특히 WeChat에서는 WeChat에 무언가를 업로드할 때 모든 종류의 문제가 발생합니다.
처음에는 파일 업로드 형태로 진행됐는데, 나중에 테스트 결과 많은 안드로이드폰이 성공적으로 업로드되지 않는 것으로 나타났습니다. 너무 많이 말하면 눈물이 난다. 너무 많이 말하지 않으면 본론으로 들어가자!
제 솔루션을 정리하자면, 아직 저처럼 초보인 분들에게 도움이 되었으면 좋겠습니다
휴대폰 사진첩과 카메라 회상
h5를 사용하여 사진첩을 호출하는 것은 웹페이지에서 한 문장으로 호출하는 것이지만, 사진첩과 카메라를 모두 조정하려면 이렇게 작성해야 합니다(정말 오랫동안 확인했습니다)
1 2 3 | <form id= "uploadForm" enctype= "multipart/form-data" >
<input class = "upload-open-photo" accept= "image/*" type= "file" id= "filechooser" v-on:change= "btnUploadFile($event)" />
</form>
|
로그인 후 복사
사진 렌더링
이미지 렌더링은 캔버스를 사용했고, 휴대폰 촬영 방향(즉, 휴대폰을 들고 있는지 여부)을 얻기 위해 EXIF.js라는 플러그인을 사용했습니다. 사진을 찍을 때 수직 또는 수평) 장치를 판단합니다. iOS 기기 중 3개를 방향으로 회전하고 캔버스를 사용하여 캔버스에 그립니다.
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 | btnUploadFile(e){
var self = this;
var filechooser = document.getElementById('filechooser');
var previewer = document.getElementById('previewer');
var that = e.target;
var files = that.files;
var file = files[0];
EXIF.getData(file, function (){
self.orientation=EXIF.getTag(this,'Orientation');
});
self.fileData = file;
if (!/\/(?:jpeg|jpg|png)/i.test(file.type)){
return ;
}
var reader = new FileReader();
reader.onload = function () {
var result = this.result;
var img = new Image();
img.onload = function () {
var compressedDataUrl =self.compress(img,self.fileData.type);
self.toPreviewer(compressedDataUrl);
img = null;
};
img.src = result;
};
reader.readAsDataURL(self.fileData);
},
|
로그인 후 복사
그림 렌더링
사진을 렌더링하려면 사진을 회전해야 할 뿐만 아니라 압축도 해야 합니다. 현재 카메라 픽셀이 너무 높기 때문에 고화질 사진을 사용하면 브라우저가 중단될 수 있습니다. WeChat 브라우저에서만 적용하면 됩니다. WeChat jssdk에서 사진 앨범을 호출하는 방법을 참조하면 사진 왜곡 및 충돌 문제가 발생하지 않습니다. 물론 WeChat만 하는 것이 아니라 캔버스
(mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html)
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 | compress(img, fileType ) {
var degree=0,drawWidth,drawHeight,width,height;
drawWidth=img.width;
drawHeight=img.height;
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');
if ($.device.ios){
switch (this.orientation){
case 3:
degree=180;
drawWidth=-width;
drawHeight=-height;
break ;
case 6:
canvas.width=height;
canvas.height=width;
degree=90;
drawWidth=width;
drawHeight=-height;
break ;
case 8:
canvas.width=height;
canvas.height=width;
degree=270;
drawWidth=-width;
drawHeight=height;
break ;
}
}
context.rotate(degree*Math.PI/180);
context.drawImage(img,0,0,drawWidth,drawHeight);
var base64data = canvas.toDataURL( fileType , 0.5);
canvas = context = null;
this.urlbase = base64data;
return base64data;
},
|
로그인 후 복사
를 사용하여 압축해야 하며 마지막으로 base64 렌더링을 src
1 2 3 | toPreviewer(dataUrl) {
previewer.src = dataUrl;
},
|
로그인 후 복사
img 태그의 이미지 업로드
로 가져옵니다. Base64는 백그라운드에서 제공됩니다. base64를 통해 이미지를 업로드하는 인터페이스가 제공됩니다. base64는 우리가 얻은 base64가 회전되고 압축된 이미지의 base64이므로 이미지를 서버에 업로드하거나 다른 위치에서 표시할 때 다른 페이지에서 이 이미지를 표시하려는 경우 회전되고 압축됩니다. , 회전과 압축 과정은 생략하겠습니다! 사실 일부 Android 기기에서는 파일 전송을 통한 사진 업로드가 작동하지 않는 이유를 아직도 모르겠습니다. 하지만 base64 업로드 방법을 성공적으로 변경한 후에는 더 이상 취업 걱정을 할 필요가 없습니다.
결론적으로 보면 제가 프론트엔드 경험이 부족해서 많은 함정을 밟은 것 같아요!
[관련 추천]
1. 무료 h5 온라인 동영상 튜토리얼
HTML5 정식 버전 매뉴얼
3. php.cn 원본 html5 동영상 튜토리얼
위 내용은 html5를 사용하여 모바일 단말기에서 사진을 처리하는 튜토리얼 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!