So rufen Sie die Kamera auf, um Bilder aufzunehmen und Bilder in H5 zu komprimieren

Dieses Mal zeige ich Ihnen, wie Sie mit H5 die Kamera aufrufen, um Bilder aufzunehmen und zu komprimieren Bilder. Wie können Sie mit H5 die Kamera aufrufen, um Bilder aufzunehmen und Bilder zu komprimieren? Was sind die Vorsichtsmaßnahmen , damit H5 die Kamera zum Aufnehmen von Bildern und zum Komprimieren der Bilder aufruft? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Ordnen Sie die Dokumente, suchen Sie nach einem Beispielcode für H5, der die Kamera zum Aufnehmen von Bildern aufruft, und komprimieren Sie die Bilder, sortieren Sie ihn und optimieren Sie ihn 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 und dann hochzuladen an den Backend-Server. Der Server sendet dann die Erkennungsergebnisse zurück.

Die Hauptfunktionspunkte des Frontends sind:

Wie man die Kamera in H5 aufruft

Wie man Bilder komprimiert

Bilder in Base64 konvertieren

H5 zum Aufrufen der Kamera/Album

Der einfachste Weg, die Kamera aufzurufen, ist die Verwendung des Eingabeattributs Datei[Kamera]:

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

Diese Methode ist weiterhin kompatibel Probleme Sie können die Kamera auf einem iPhone normal öffnen, aber nach dem Klicken auf einem Android-Telefon stehen Ihnen gemischte Optionen wie Kamera, Galerie, Dateimanager usw. zur Verfügung. Ich habe viel im Internet gesucht, aber keine gute Lösung gefunden, sodass ich nur weiter schreiben kann. . .

Bildkomprimierung

Bildkomprimierung erfordert FileReader und .

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.

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 klein ist, wird das Bild verzerrt. Erstellen Sie dynamisch das -Tag 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 das Serverergebnis an. . . 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');
});

Nachdem Sie die Richtungsinformationen des Bildes erhalten haben, führen Sie den entsprechenden Rotationsvorgang entsprechend dem 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;
}

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So implementieren Sie das Scannen von H5-Handys

So starten Sie einen farbenfrohen Ring-Countdown mit SVG

So führen Sie domänenübergreifende Kommunikation in HTML5 durch

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