8358f7f485f02a5b59e11c4d5964029c 업로드 이미지를 사용합니다. 다음은 몇 가지 함정입니다.
<input id="imgUpload" type="file" onchange="addPic" accept="image/*" />입력 파일이 변경을 트리거할 때 업로드된 파일 가져오기
function addPic(e){ if (typeof FileReader === 'undefined') { return alert('你的浏览器不支持上传图片哟!'); } var files = e.target.files || e.dataTransfer.files; if(files.length > 0){ imgResize(file[0], callback); } }FileReader를 사용하여 이미지 데이터를 가져오고 캔버스를 사용하여 압축 입니다
function imgResize(file, callback){ var fileReader = new FileReader(); fileReader.onload = function(){ var IMG = new Image(); IMG.src = this.result; IMG.onload = function(){ var w = this.naturalWidth, h = this.naturalHeight, resizeW = 0, resizeH = 0; // maxSize 是压缩的设置,设置图片的最大宽度和最大高度,等比缩放,level是报错的质量,数值越小质量越低 var maxSize = { width: 500, height: 500, level: 0.6 }; if(w > maxSize.width || h > maxSize.height){ var multiple = Math.max(w / maxSize.width, h / maxSize.height); resizeW = w / multiple; resizeH = w / multiple; } else { // 如果图片尺寸小于最大限制,则不压缩直接上传 return callback(file) } var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'); if(window.navigator.userAgent.indexOf('iPhone') > 0){ canvas.width = resizeH; canvas.height = resizeW; ctx.rorate(90 * Math.PI / 180); ctx.drawImage(IMG, 0, -resizeH, resizeW, resizeH); }else{ canvas.width = resizeW; canvas.height = resizeH; ctx.drawImage(IMG, 0, 0, resizeW, resizeH); } var base64 = canvas.toDataURL('image/jpeg', maxSize.level); convertBlob(window.atob(base64.split(',')[1]), callback); } }; fileReader.readAsDataURL(file); }
HTML5 개체 업로드 데이터의 FormData 사용
function convertBlob(base64, callback){ var buffer = new ArrayBuffer(base64.length); var ubuffer = new Uint8Array(buffer); for (var i = 0; i < base64.length; i++) { ubuffer[i] = base64.charCodeAt(i) } var blob; try { blob = new Blob([buffer], {type: 'image/jpg'}); } catch (e) { window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder; if(e.name === 'TypeError' && window.BlobBuilder){ var blobBuilder = new BlobBuilder(); blobBuilder.append(buffer); blob = blobBuilder.getBlob('image/jpg'); } } callback(blob) }
2.
HTML5 정식 버전 매뉴얼php.cn 원본 html5 동영상 튜토리얼위 내용은 이미지 압축을 위한 예제 코드 공유 및 HTML5를 사용한 업로드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!