Explication détaillée de HTML5 pour implémenter la fonction de prise et de téléchargement de photos sur WeChat

Cet article présente principalement l'implémentation HTML5 de la fonction de prise de vue et de téléchargement de photos WeChat, la mise en œuvre de la prise de vue sur téléphone mobile HTML5 Canvas et les solutions aux problèmes rencontrés lors de la compression et du téléchargement local d'images. Il a une certaine valeur de référence. faites-y référence.

J'ai créé une fonction de téléchargement de photos HTML5 pour WeChat, mais il y a eu de nombreux problèmes...

Code frontal

$(':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;

 });

Code backend

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

Mesure réelle :

Version ordinateur

Version Chrome 29, téléchargée avec succès, image source 3M, ratio compressé 1024*, environ 250 Ko Réussi !

Terminal mobile

version Android 4+, WeChat, aucune réponse en cliquant sur télécharger, ouvrir dans le navigateur mobile et télécharger, prise de vue environ 3M-, compressé 1024* Ratio, environ 3M-, pas de compression du tout ! ! ! Échec !

iphone4 & 4s version 6+ WeChat, tourné environ 3M-, compressé au ratio 1024*, environ 250 Ko Réussi !

iphone5 version 6+ WeChat, génère une déformation de la toile. Échec !

Résumé : BUG au niveau du système, pas de solution... Je ne sais pas quoi faire maintenant...

- ---- ---------------------------------- Rapport de suivi 12 septembre 2013---- ---- ---------------------------------------------

Trouvez un JavaScript écrit par une personne formidable Plug-in pour compiler des jpg, javascript_jpeg_encoder.

Utilisez cette méthode pour résoudre le problème selon lequel Android ne peut pas compresser les images.

Il reste actuellement 2 BUG au niveau du système.

1. La version Android de WeChat ne peut pas répondre à l'entrée de contrôle de téléchargement style=file ;

2. L'iPhone5 ne parvient pas à générer le canevas et l'image est déformée.

--------------------------------------------------------- Suivre- up Rapport 2 2013 10 octobre------------------------------------------------------ ----

Il existe également le plug-in ios-imagefile-megapixel écrit par une personne talentueuse, qui résout le problème de distorsion de l'écran sur iPhone5+.

Il reste actuellement 1 BUG au niveau du système.

La version Android de WeChat ne peut pas répondre au téléchargement du contrôle d'entrée style=file;

------------------------- - ------------- Rapport de suivi 3 16 mai 2014------------------------------- ------------------

À l'heure actuelle, tous les problèmes ont été résolus. Le plug-in a été créé sur github. Les amis dans le besoin peuvent l'obtenir. . Au fait, le temps passe si vite.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!