>  기사  >  웹 프론트엔드  >  이미지 압축을 위한 예제 코드 공유 및 HTML5를 사용한 업로드

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

零下一度
零下一度원래의
2017-05-08 13:47:042521검색
구현 과정:
  • 8358f7f485f02a5b59e11c4d5964029c 업로드 이미지를 사용합니다. 다음은 몇 가지 함정입니다.

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 휴대폰이 이를 적절하게 처리하는지 판단해야 합니다.
    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(&#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)
    }
  • [관련 권장 사항]
1. 무료 h5 온라인 비디오 튜토리얼

2.

HTML5 정식 버전 매뉴얼

3.

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

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.