H5 활동은 매우 일반적이며, 한 가지 양식은 사용자가 참여할 사진을 업로드 할 수 있도록하는 것입니다. 모바일 터미널은 일반적으로 휴대 전화 앨범에 사진을 업로드합니다. 업로드가 직접 업로드되면 많은 트래픽이 소비되며 경험이 좋지 않습니다. 따라서 업로드하기 전에 지역 영역을 압축해야합니다.
다음으로, H5 활동 개발에서 압축 업로드 된 기능을 요약하고, 밟은 구덩이 몇 개를 표시하고, 당신과 공유하십시오.Xiaobai District는 봐야합니다
모바일 사진 업로드 개념이 없으면 Filereader, Blob 및 FormData의 세 가지 개념을 보완해야합니다.
1. 필레어정의
FilereAder 객체를 사용하면 웹 응용 프로그램이 비동기적 일 수 있으며 사용자 컴퓨터에 저장된 파일 (또는 원시 데이터 버퍼)을 읽을 수 있습니다.
방법
이벤트 처리 절차
사용
var filereader = new filereader (); intubler.onload = {var url = this.result;} // orfilereader.onload (e) {var url = e.target. 2. Blob이진 객체 인 Blob (Binary Large Object)은 이진 파일을 저장할 수있는 컨테이너입니다.
3. FormdataFormData 객체를 사용하면 일련의 주요 값을 사용하여 전체 양식을 시뮬레이션 한 다음 xmlhttprequest를 사용 하여이 양식을 보낼 수 있습니다.
주제
이동 사진 압축 및 업로드 프로세스 :1) 파일 입력 파일 업로드 사진을 업로드하고 FilerEader를 사용하여 사용자가 업로드 한 그림을 읽습니다.
2) 그림 데이터는 IMG 객체로 전송되고 IMG를 캔버스로 그린 다음 캔버스를 사용하여 압축을 위해 사용합니다.
3) 압축 된 Base64 형식 이미지 데이터를 가져 와서 바이너리로 바꾸고 FormData에 연결 한 다음 xmlhttprequest를 통해 FormData를 제출하십시오.
1. 사진 데이터를 얻으십시오 FileEle.onchange = function () {if (! this.files.length) 반환; .test (_simplefile.type)) return exif.js var _orientation (_ua.indexofxof ( 'iPhone') {exif.getData. .gettag (this, 'Orientation');} // 1. 파일 읽기를 사용하여 그림 파일을 정복하십시오. 즉, IMG/PNG; .src; _reader (), _img = _Reader.onload = {_url = this.result; 압축 (_img); 2. 압축 그림 /** * 크기의 크기를 계산하고 크기에 따라 크기를 압축하십시오 * 1. iPhone 휴대 전화 html5 그림 방향 문제 업로드, exif.js * 2. Android UC 브라우저는 새 blob ()를 지원하지 않습니다. blobbuilder* @param {object} _img image* @param {number} _ontation 사진 정보* @return {string} base64 형식의 이미지 그림*/function compress (_img, _orientation) {// 2. 대상 크기, 그림의 높은 높이가 그림의 그림을 업로드하면 대상 차트보다 크고 대상 맵과 다른 압축이 더 작은 경우 사진 업로드 비율이 확대됩니다. var _goalwidth = 750, // target width_goalheight = 750, // target height_imgwidth = _img.naturwidth, // image width_imgheight = _img.naturalheight, // picture height_tempwi dth = _imgwidth, // Zoom Teporary width _ a gighthighthighthighthight gight _tmhgeighte 줌 또는 축소 후 _r = 0; // 압축 비율 (_imgwidth === _ GoalWidth && imgheight === _ GoalHeight) {_imgwidth> _goalwidth> _imgheight) {// _goalHeight) {// 대상 차트와 동일 압축이 압축되어 _r = _imgwidth / _goalwidth; /_imgheight;}} else {if (_imgwidth <_goalwidth) {// small _r = _goalwidth/_imgwidth;} else {// small은 __r = __r = __r = __r = __goalHeight/_ imgheight;}보다 작습니다. } _tempwidth = math.ceil (_imgwidth * _r); get (! _ canvas.getContext); 방향 오류 문제 스위치 (_orientation) {// iPhone 수평 화면 촬영, 홈 키는 사례 3 : _degree = 180; 정상적으로) 사례 6 : _canvas. 높이 = _degree = 270; pi/180; Mage (_img, 0, 0, _tempwidth, _tempheight) = _canvas.todataurl ( 'image/jpeg'); 3. 사진 업로드 /** * 사진을 nos * @param {object} _blog blob 형식 그림 * @return {void} */function uploadphoto (_data) {// 4. 캔버스 //window.atob 메소드에서 그림 정보 가져 오기 Base64 형식의 그림은 바이너리 문자열로 변환됩니다. Split ( ',') [1]; Atob (_data); _data.length) var_ubufffer = _buffer (var i = 0; i ++) {_ubuffer [i] = _data.charcodeat (i); 새 blob ()를 지원하지 않음, blobbuilder var _blob을 사용하십시오. Window.weind || (); $ requestdwrbyget : [_suffix, '', '', ','1 ', onload : {_tokens = _tokens || || '); return em; ); (_xhr.readystate === 4) {if (if (_xhr.status> = 200 && _xhr.status <300) || _xhr.status === 304) {var _imgurl = http://nos.netease.com / + _bucketname +/ + _objectname +? /act/tailuu? op = effect & origimgurl = ' + _newurl;iPhone 촬영 그림 방향을 결정하십시오 : Exif
위는 Xiaobian이 소개 한 HTML5 모바일 개발 사진 및 업로드 기능이 있으면 모든 사람에게 도움이되기를 바랍니다 시간에 모든 사람. VEVB WULIN 웹 사이트를 지원해 주셔서 대단히 감사합니다!