Ausführliche Erläuterung von Beispielen zum Aufrufen der Kamera zum Aufnehmen von Bildern und Komprimieren von Bildern in HTML5

In diesem Artikel wird hauptsächlich der Beispielcode von H5 vorgestellt, der die Kamera zum Aufnehmen von Bildern und zum Komprimieren der Bilder aufruft. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor, um einen Blick darauf zu werfen.

Ordnen Sie die Dokumente, suchen Sie nach einem Beispielcode für H5, der die Kamera zum Aufnehmen von Bildern aufruft, komprimieren Sie die Bilder, sortieren Sie sie und optimieren Sie sie ein wenig für die Weitergabe.

Hintergrund

Ich habe kürzlich eine h5-Seite erstellt. Die Hauptfunktion besteht darin, die Kamera aufzurufen, um Bilder aufzunehmen oder Bilder aus dem Album auszuwählen und die Fotos auf Base64 zu komprimieren Laden Sie sie dann auf den Backend-Server hoch. Der Server gibt dann die Erkennungsergebnisse zurück.

Die Hauptfunktionspunkte des Frontends sind:

1. Wie man die Kamera in H5 aufruft

2. Wie man komprimiert Bilder

3. Bild in Base64 konvertieren

H5 ruft Kamera/Album auf

Der einfachste Weg dazu Aufrufkamera soll Eingabedatei[Kamera] verwenden Attribut:

<input type="file" capture=camera accept="image/*">//相机
<input type="file" accept="image/*">//相册

Es gibt immer noch ein Problem mit der Kompatibilität dieser Methode. Die Kamera kann normal auf einem geöffnet werden iPhone, aber nach dem Klicken auf ein Android-Telefon werden in der Kamera gemischte Optionen wie Galerie, Dateimanager und mehr angezeigt. Ich habe viel im Internet gesucht, aber keine gute Lösung gefunden, sodass ich nur weiter schreiben kann. . .

Bildkomprimierung

Bildkomprimierung erfordert FileReader und <canvas>.

Das FileReader-Objekt ermöglicht es Webanwendungen, den Inhalt von auf dem Computer gespeicherten Dateien asynchron zu lesen, indem ein File- oder Blob-Objekt verwendet wird, um die zu lesende Datei oder die zu lesenden Daten anzugeben.

<canvas> ist ein HTML-Element, in dem Grafiken mithilfe von Skripten gezeichnet und einfache Animationen gezeichnet werden können.

Bildkomprimierung erfordert eine Komprimierung der Auflösung und Qualität des Bildes. Für die Auflösungskomprimierung stelle ich die maximale Seite des Bildes auf 800 ein und die andere Seite wird entsprechend dem Originalverhältnis des Bildes skaliert Legen Sie außerdem das Gesamtskalierungsverhältnis des Bildes fest.

var MAX_WH=800;
var image=new Image();
image.onload=function () {
  if(image.height > MAX_WH) {
    // 宽度等比例缩放 *= 
    image.width *= MAX_WH/ image.height;
    image.height = MAX_WH;
  }
  if(image.width > MAX_WH) {
    // 宽度等比例缩放 *= 
    image.height *= MAX_WH/ image.width;
    image.width = MAX_WH;
  }
}
image.src=dataURL;//dataURL通过FileReader获取

Dann ist da noch die Qualität des komprimierten Bildes. Die Komprimierung ist hier auf 80 % eingestellt. Wenn die Einstellung zu gering ist, wird das Bild verzerrt. Erstellen Sie dynamisch das Tag <canvas> und komprimieren Sie dann das Bild:

var quality=80;
var cvs = document.createElement('canvas');
cvs.width = image.width;
cvs.heigh = image.height;
var context=cvs.getContext("2d");
context.drawImage(image, 0, 0,image.width, image.height);
dataURL = cvs.toDataURL('image/jpeg', quality/100);

Laden Sie es dann auf den Server hoch und zeigen Sie die Serverergebnisse an glatt. . . Beim Aufnehmen von Bildern auf einem iOS-Telefon wird das Bild aus unerklärlichen Gründen gedreht. Beheben Sie das Problem weiter.

Lösung der IOS-Bildrotation

Zitat zuerst exif.js und erhalten Sie die Fotorichtungsinformationen über EXIF.getData und EXIF.getTag.

//file通过input标签获取
EXIF.getData(file,function(){
  orientation=EXIF.getTag(file,'Orientation');
});

Im Folgenden wird die Bedeutung jedes Ausrichtungswerts angegeben, der dem Aufnehmen von Bildern mit dem iPhone entspricht:

orientation	描述
3	iphone横屏拍摄，此时home键在左侧，图片相对于原始位置旋转了180度
6	iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)，图片相对于原始位置逆时针旋转可90度
8	iphone竖屏拍摄，此时home键在上方，图片相对于原始位置顺时针旋转了90度

Nach Erhalt der Ausrichtungsinformationen des Bild, entsprechend Führen Sie den entsprechenden Rotationsvorgang für den erhaltenen Wert durch.

switch (orientation) {
  case 6:
  case 8:
    cvs.width = height;
    cvs.height = width;
    break;
}
var context=cvs.getContext("2d");
switch(orientation){
  //iphone横屏拍摄，此时home键在左侧
  case 3:
  // 180度向左旋转
  context.translate(width, height);
  context.rotate(Math.PI);
  break;
  //iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)
  case 6:
  context.rotate(0.5 * Math.PI);
  context.translate(0, -height);
  break;
  //iphone竖屏拍摄，此时home键在上方
  case 8:
  // 逆时针旋转90度
  context.rotate(-0.5 * Math.PI);
  context.translate(-width, 0);
  break;
}

Dann habe ich das Bild hochgeladen und festgestellt, dass das Bild unter IOS normal war.

Der vollständige Code ist unten angegeben:

$('input[type=file]').change(function(e) {
  var file = this.files[0];
  var mime_type=file.type;
  var orientation=0;
  if (file && /^image\//i.test(file.type)) {
    EXIF.getData(file,function(){
      orientation=EXIF.getTag(file,'Orientation');
    });

    var reader = new FileReader();
    reader.onloadend = function () {
      var width,height;
      var MAX_WH=800;
      var image=new Image();
      image.onload=function () {
        if(image.height > MAX_WH) {
          // 宽度等比例缩放 *= 
          image.width *= MAX_WH / image.height;
          image.height = MAX_WH;
        }
        if(image.width > MAX_WH) {
          // 宽度等比例缩放 *= 
          image.height *= MAX_WH / image.width;
          image.width = MAX_WH;
        }
        //压缩
        var quality=80;
        var cvs = document.createElement('canvas');
        cvs.width = width = image.width;
        cvs.height =height = image.height;

        switch (orientation) {
          case 6:
          case 8:
            cvs.width = height;
            cvs.height = width;
            break;
        }

        var context=cvs.getContext("2d");

        //解决ios图片旋转问题 
        switch(orientation){
          //iphone横屏拍摄，此时home键在左侧
          case 3:
          // 180度向左旋转
          context.translate(width, height);
          context.rotate(Math.PI);
          break;
          //iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)
          case 6:
          context.rotate(0.5 * Math.PI);
          context.translate(0, -height);
          break;
          //iphone竖屏拍摄，此时home键在上方
          case 8:
          // 逆时针旋转90度
          context.rotate(-0.5 * Math.PI);
          context.translate(-width, 0);
          break;
        }
        context.drawImage(image, 0, 0,image.width, image.height);
        dataURL = cvs.toDataURL('image/jpeg', quality/100);
        //获取识别结果
        ...
      }
      image.src=dataURL;
    };
    reader.readAsDataURL(file);
  }else{
    alert("只能识别图片！")
  }
});

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen zum Aufrufen der Kamera zum Aufnehmen von Bildern und Komprimieren von Bildern in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!