html5 캔버스 모바일 browser_html5 튜토리얼 기술에 이미지 압축 업로드

최근 모바일 단말에서 아바타 업로드 기능을 설계할 때 원래는 로 formData를 통해 직접 업로드했지만, 실제 사용법은 너무 큰 사진(촬영한 사진)입니다. 고화소 휴대폰 등) 업로드 시간이 너무 길면 업로드 실패의 원인이 되며, 매번 이미지 원본 크기를 업로드(백그라운드 처리 압축)하면 사용자 경험에 큰 영향을 미치게 되므로 압축 방법을 연구했습니다. 다음은 몇 가지 아이디어와 생각입니다.

1. 로컬 이미지를 가져와서 캔버스에 그립니다. 여기서 어려운 점은 브라우저의 보호 메커니즘으로 인해 로컬 파일의 이미지 경로를 직접 얻을 수 없기 때문에 로컬 이미지를 base64 형식으로 컴파일한 다음 업로드해야 한다는 것입니다. 코드는 다음과 같습니다.

JavaScript 코드클립보드에 콘텐츠 복사

1. var result = document.getElementById("/* 오류 메시지 표시 블록 */")
2. var input = document.getElementById("/* 파일 태그 업로드 */")
4. if(typeof FileReader === '정의되지 않음'){
5. result.innerHTML = "

   죄송합니다. 귀하의 브라우저는 FileReader

   를 지원하지 않습니다.";
6. input.setAttribute('비활성화','비활성화'); }
7. 그밖에{ input.addEventListener(
8. '변경',readFile,false); }
10. 함수
11. readFile(){ var
12. file = this.files[0] if
13. (!/image/w /.test(file.type)){ warning("파일이 이미지 형식인지 확인하세요."
14. ) 반환
15. 거짓 }
16. var
17. reader = new FileReader() reader.readAsDataURL(파일)
18. reader.onload = 함수
19. (e){ // this.result 컴파일된 이미지 인코딩은 src로 직접 표시 가능
20. }
21. }
2. 캔버스에서 이미지 처리

JavaScript 코드

클립보드에 콘텐츠 복사

1. var c=document.getElementById("/* 캔버스 태그 ID */"); >
2. var cxt=c.getContext("2d")
3. var img=new 이미지()
img.src=
4. /* 획득한 이미지 인코딩 주소 */
5. var width = img.width;
var
6. 높이 = img.height; dic = 높이 / 너비
c.width = 200;
7. //이미지 압축 기준은 200px을 기준으로 계산됩니다.
8. c.height = 200 * dic
cxt.clearRect(0,0,200,200*dic)
cxt.drawImage(img,0,0,200,200*dic)
11. var
finalURL = c.toDataURL()
12. // 얻은 최종 URL은 img 태그를 업로드하거나 직접 생성하는 데 사용할 수 있는 압축된 이미지 인코딩입니다.
13. 여기서 주의할 몇 가지 사항은 다음과 같습니다.
1. 로컬에서 디버깅할 때 오류가 발생합니다. 원인은 크로스 도메인 문제이므로 서버 측에서 디버깅해야 합니다.

2. 캔버스의 drawImage() 메소드에는 이미지 자르기 기능이 있지만, 이미지 늘이기 및 자르기를 동시에 작성하면 자르기 메소드가 먼저 실행됩니다.

3. AJAX를 사용하여 이미지 인코딩을 업로드하면 인코딩의 더하기 기호가 공백으로 변환되어 백그라운드 컴파일이 실패하게 됩니다.

4. 이미지 영역을 선택하고 업로드하는 방법은 아직 시범 단계이며 나중에 경험을 추가하겠습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

원문:

http://www.cnblogs.com/liaojh/p/5209433.html