Über den Code für H5, um die Kamera aufzurufen, Bilder aufzunehmen und die Bilder zu komprimieren

In diesem Artikel wird hauptsächlich der Beispielcode von H5 vorgestellt, der die Kamera zum Aufnehmen von Bildern und zum Komprimieren von Bildern aufruft. Der Inhalt ist ziemlich gut und dient als Referenz.

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:

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 call camera soll die Eingabedatei[camera ] 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 geöffnet werden ein iPhone, aber nach dem Klicken auf ein Android-Telefon werden die Kamera, die Galerie, der Dateimanager und andere Hybridoptionen 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.

Dann ist da noch die Qualität des komprimierten Bildes. Die Komprimierung ist hier auf 80 % eingestellt, was zu einer Verzerrung des Bildes führt . Erstellen Sie dynamisch das Tag <canvas> 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 die Serverergebnisse an so 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-Bilddrehung

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

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

Das Folgende gibt die Bedeutung jedes Ausrichtungswerts entsprechend der iPhone-Kamera an:

Nachdem Sie die Ausrichtungsinformationen des Bildes erhalten haben, führen Sie den entsprechenden Rotationsvorgang basierend auf dem erhaltenen Wert durch.

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

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

Der vollständige Code ist unten angegeben:

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle hilfreich ist Weitere Informationen finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Über die Kontrollanalyse der neuen H5-Attribute Audio und Video

Mehrere H5-Bilder unter Angular How um Bilder hochzuladen

Das obige ist der detaillierte Inhalt vonÜber den Code für H5, um die Kamera aufzurufen, Bilder aufzunehmen und die Bilder zu komprimieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!