Teilen Sie Beispielcode für die Bildkomprimierung und den Upload mit HTML5

Implementierungsprozess:

• Holen Sie sich die hochgeladene Datei

• Verwenden Sie FileReader, um die Datei zu lesen image und erstellen Sie ein neues Image-Objekt, um die von FileReader gelesenen Bilddaten einzufügen.

• Verwenden Sie Canvas, um das Image-Objekt proportional zu skalieren, es auf die Canvas zu schreiben und als Daten zu speichern base64-Format (Hier wird der FormData-Objekt-Upload verwendet. Tatsächlich können die Base64-Daten mithilfe der Post-Methode direkt über Ajax auf den Server hochgeladen werden, wodurch die folgenden zwei Schritte vermieden werden können 🎜>Erstellen Sie ein neues Blob. Das Objekt fügt Base64-Daten ein.

• verwendet das FormData-Objekt zum Hochladen auf einen Cloud-Speicherserver eines Drittanbieters

  verwendet natives HTMLBilder hochladen, hier sind einige Fallstricke:

• accept legt den Typ der hochgeladenen Datei fest. Verwenden Sie hier image/* direkt Ohne Angabe eines bestimmten Suffixnamens können Bilder auf einigen Android-Telefonen nicht hochgeladen werden.

Fügen Sie das Attribut „Mehrfach“ hinzu, um mehrere Bilder auszuwählen (in diesem Beispiel wird nur eins ausgewählt). einzelnes Bild);

• capture="camera"-Attribut kann die Kamera aufrufen (durch Hinzufügen dieses Attributs wird die Kamera direkt auf dem iPhone aufgerufen, ohne das Album zu lesen; und derzeit verwenden Android- und iOS-Geräte Accept ="image/*" Sie können wählen, ob Sie die Kamera zum Aufnehmen von Bildern verwenden oder Bilder aus dem Album verwenden möchten, daher kann dieses Attribut ignoriert werden.

• Rufen Sie die hochgeladene Datei ab, wenn die Eingabedatei die Änderung auslöst

  Ereignis

• Verwenden Sie FileReader, um die Bilddaten abzurufen. und verwenden Sie die Canvas-Komprimierung

<input id="imgUpload" type="file" onchange="addPic" accept="image/*" />

Das iOS-Telefon dreht sich beim Aufnehmen von Bildern um 90 Grad. Hier müssen Sie vor dem Hochladen feststellen, ob das iOS-Telefon die Bilder entsprechend verarbeitet hat

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);
  }
}

Die Base64-Daten werden in ein Blob-Objekt konvertiert

• Android-Telefone unterstützen die Blob

  -Konstruktormethode nicht

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);
}

Verwenden Sie
• HTML5

  s FormData-Objekt, um Daten hochzuladen

  [Verwandte Empfehlungen]

1.

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)
}

Kostenloses h5-Online-Video-Tutorial

2 .

HTML5-Vollversionshandbuch

function callback(fileResize){
  var data = new FormData();
  data.append('file', fileResize);
  var config = {
    headers: {'Content-Types': 'multipart/form-data'}
  };
  // 这里用的es6语法发起请求，可以无视
  axios.post(url, data, config).then().catch(e){}
}

3.

php.cn Original-HTML5-Video-Tutorial

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispielcode für die Bildkomprimierung und den Upload mit HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!