H5 fordert die Kamera auf, Bilder aufzunehmen und die Bilder zu komprimieren

Dieses Mal bringe ich Ihnen H5 dazu, die Kamera aufzurufen, um ein Bild aufzunehmen und das Bild zu komprimieren ist ein praktischer Fall, werfen wir einen Blick darauf. Ordnen Sie die Dokumente und finden Sie einen Beispielcode für den H5-Aufruf der Kamera zum Aufnehmen von Bildern und Komprimieren der Bilder. Ich werde ihn zum Teilen ein wenig sortieren und optimieren.

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:

Wie man die Kamera in H5 aufruft
Wie man komprimiert Bilder
Bild in Base64 konvertieren

H5 ruft Kamera/Album auf

Der einfachste Weg dazu Beim Aufruf der Kamera wird die Eingabedatei[Kamera] verwendet

Attribute

:

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

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

Bildkomprimierung

Bildkomprimierung erfordert

und

. FileReader<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 Sie Skripte zum Zeichnen von Grafiken und einfachen Animationen verwenden 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.

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

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获取

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

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

Lösung der IOS-Bildrotation

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

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

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

Nachdem Sie die Ausrichtungsinformationen des Bildes erhalten haben, führen Sie den entsprechenden Drehvorgang gemäß aus der erhaltene Wert.

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

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

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

Der vollständige Code ist unten angegeben:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln die chinesische PHP-Website!

$('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("只能识别图片！")
  }
});

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung des Verlaufsmodus in H5

Lokale Speicher- und Sitzungsspeicher-Nutzungsaufzeichnungen

Das obige ist der detaillierte Inhalt vonH5 fordert die Kamera auf, Bilder aufzunehmen und die Bilder zu komprimieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!