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

구현 과정:

• 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 === 'undefined') {
    return alert('你的浏览器不支持上传图片哟！');
  }
  var files = e.target.files || e.dataTransfer.files;
  if(files.length > 0){
    imgResize(file[0], callback);
  }
}

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

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

base64 데이터를 Blob 객체로 변환
Android 휴대폰은 Blob

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

• 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: &#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)
  }

[관련 권장 사항]

1. 무료 h5 온라인 비디오 튜토리얼

2.

HTML5 정식 버전 매뉴얼

3.

php.cn 원본 html5 동영상 튜토리얼

위 내용은 이미지 압축을 위한 예제 코드 공유 및 HTML5를 사용한 업로드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!