Detaillierte Erläuterung von HTML5 zur Implementierung der Funktion zum Aufnehmen und Hochladen von Fotos auf WeChat

In diesem Artikel werden hauptsächlich die HTML5-Implementierung der WeChat-Funktion zum Aufnehmen und Hochladen von Fotos, die Implementierung der HTML5-Canvas-Mobiltelefonaufnahme und die Lösungen für Probleme beim lokalen Komprimieren und Hochladen von Bildern vorgestellt. Es hat einen gewissen Referenzwert siehe es.

Ich habe eine HTML5-Foto-Upload-Funktion für WeChat erstellt, aber es gab viele Probleme...

Front-End-Code

$(':file').on('change',function(){
  var file = this.files[0];
  var url = webkitURL.createObjectURL(file);

  /* 生成图片
  * ---------------------- */
  var $img = new Image();
  $img.onload = function() {

   //生成比例
   var width = $img.width,
     height = $img.height,
     scale = width / height;
   width = parseInt(800);
   height = parseInt(width / scale);

   //生成canvas
   var $canvas = $('#canvas');
   var ctx = $canvas[0].getContext('2d');
   $canvas.attr({width : width, height : height});
   ctx.drawImage($img, 0, 0, width, height);
   var base64 = $canvas[0].toDataURL('image/jpeg',0.5);

   //发送到服务端
   $.post('upload.php',{formFile : base64.substr(22) },function(data){
    $('#php').html(data);
   });

  }
  $img.src = url;

 });

Backend-Code

$base64 = $_POST['formFile'];
$IMG = base64_decode( $base64 );
file_put_contents('1.png', $IMG );

Tatsächliche Messung:

Computerversion

Chrome-Version 29, erfolgreich hochgeladen, Quellbild 3M, komprimiertes Verhältnis 1024*, ca. 250 KB Bestanden!

Mobiles Endgerät

Android Version 4+, WeChat, keine Reaktion beim Klicken auf Hochladen, im mobilen Browser öffnen und hochladen, Aufnahme etwa 3M-, komprimiertes 1024*-Verhältnis, ca. 3M-, überhaupt keine Komprimierung! ! ! Fehlgeschlagen!

iPhone 4 & 4s Version 6+ WeChat, Aufnahme ca. 3M-, komprimiert auf 1024*-Verhältnis, ca. 250 KB Bestanden!

iphone5 Version 6+ WeChat, erzeugt Leinwandverformung. Fehlgeschlagen!

Zusammenfassung: Fehler auf Systemebene, ​​keine Lösung... Ich weiß nicht, was ich jetzt tun soll...

- ---- -------------------- Nachbericht 12. September 2013---- ---- ---------------------------------------------

Finden Sie ein von einer großartigen Person geschriebenes JavaScript-Plug-in zum Kompilieren von JPG, javascript_jpeg_encoder.

Verwenden Sie diese Methode, um das Problem zu lösen, dass Android Bilder nicht komprimieren kann.

Derzeit sind noch 2 Fehler auf Systemebene vorhanden.

1. Die WeChat-Android-Version reagiert nicht auf die Upload-Steuereingabe style=file;

2. Das iPhone5 kann keine Leinwand generieren und das Bild ist verzerrt.

--------------------------- Folgen- nach oben Bericht 2 2013 10. Oktober ----------------------------- ----

Es gibt auch das von einer talentierten Person geschriebene ios-imagefile-megapixel-Plug-in, das das Problem der Bildschirmverzerrung auf dem iPhone5+ löst.

Derzeit ist noch 1 Fehler auf Systemebene vorhanden.

Die Android-Version von WeChat kann nicht auf die Upload-Steuereingabe „style=file;“ reagieren.

------------------------- - ------------- Folgebericht 3 16. Mai 2014--------------------------- ----

Derzeit sind alle Probleme gelöst. Das Plug-in ist auf Github verfügbar . Die Zeit vergeht übrigens so schnell.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von HTML5 zur Implementierung der Funktion zum Aufnehmen und Hochladen von Fotos auf WeChat. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!