이미지 압축을 위한 예제 코드 공유 및 HTML5를 사용한 업로드-H5 튜토리얼-php.cn

이미지 압축을 위한 예제 코드 공유 및 HTML5를 사용한 업로드

零下一度

풀어 주다： 2017-05-08 13:47:04

원래의

2547명이 탐색했습니다.

구현 과정:

FileReader를 사용하여 읽기 image 를 생성하고 FileReader가 읽은 이미지 데이터를 넣기 위해 새로운 Image 객체를 만듭니다.
캔버스를 사용하여 Image 객체의 크기를 비례적으로 조정하고 캔버스에 쓰고 데이터로 저장합니다. base64 형식(여기에서는 FormData 객체 업로드가 사용됩니다. 실제로 base64 데이터는 post 메소드를 사용하여 ajax를 통해 서버에 직접 업로드할 수 있으며, 이렇게 하면 다음 두 단계를 피할 수 있습니다).
새 Blob 만들기 개체는 base64 데이터를 여기에 넣습니다.
는 FormData 개체를 사용하여 타사 클라우드 스토리지 서버에 업로드합니다.
은 HTML 기본 업로드 이미지를 사용합니다. 다음은 몇 가지 함정입니다.

accept는 업로드된 파일 유형을 설정합니다. 특정 접미사 이름을 지정하지 않고 직접 사용합니다. 그렇지 않으면 일부 Android 휴대폰에서는 사진을 업로드할 수 없습니다.

다중
을 추가하여 여러 장의 사진을 선택하세요. 단일 사진 선택);
capture="camera" 속성은 카메라를 호출할 수 있습니다(이 속성을 추가하면 앨범을 읽지 않고 iPhone에서 카메라를 직접 호출합니다. 현재 Android 및 iOS 장치 accept="image/*"를 사용하십시오. 카메라를 사용하여 사진을 찍거나 앨범의 사진을 사용하도록 선택할 수 있으므로 이 속성은 무시할 수 있습니다.
```
<input id="imgUpload" type="file" onchange="addPic" accept="image/*" />
```
로그인 후 복사
입력 파일이 변경을 트리거할 때 업로드된 파일 가져오기

function addPic(e){
  if (typeof FileReader === &#39;undefined&#39;) {
    return alert(&#39;你的浏览器不支持上传图片哟！&#39;);
  }
  var files = e.target.files || e.dataTransfer.files;
  if(files.length > 0){
    imgResize(file[0], callback);
  }
}

로그인 후 복사

FileReader를 사용하여 이미지 데이터를 가져오고 캔버스를 사용하여 압축 입니다

iOS 휴대폰은 사진 촬영 시 90도 회전하므로 업로드하기 전에 iOS 휴대폰이 이를 적절하게 처리하는지 판단해야 합니다.

생성자 메서드를 지원하지 않습니다

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(&#39;canvas&#39;),
      ctx = canvas.getContext(&#39;2d&#39;);
      if(window.navigator.userAgent.indexOf(&#39;iPhone&#39;) > 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(&#39;image/jpeg&#39;, maxSize.level);
      convertBlob(window.atob(base64.split(&#39;,&#39;)[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: &#39;image/jpg&#39;});
  } catch (e) {
    window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;
    if(e.name === &#39;TypeError&#39; && window.BlobBuilder){
      var blobBuilder = new BlobBuilder();
      blobBuilder.append(buffer);
      blob = blobBuilder.getBlob(&#39;image/jpg&#39;);
    }
  }
  callback(blob)
}

로그인 후 복사