Detailed explanation of HTML5 to implement the function of taking and uploading photos on WeChat

This article mainly introduces the HTML5 implementation of the WeChat shooting and uploading photo function, the implementation of HTML5 Canvas mobile phone shooting, and the solutions to problems encountered when locally compressing and uploading pictures. It has certain reference value. Interested friends can refer to it.

I made a WeChat HTML5 shooting and uploading photo function, but there were many problems...

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

##Actual measurement:

Computer terminal

Chrome version 29, uploaded successfully, source image 3M, compressed 1024 * ratio, about 250kb

Passed!

Mobile terminal

android version 4+, WeChat, click upload but no response, open in mobile browser to upload, shoot about 3M-, compressed 1024* Ratio, about 3M-, no compression at all! ! !

fail!

iphone4 & 4s version 6+ WeChat, shot about 3M-, compressed to 1024 * ratio, about 250kb

Passed!

iphone5 version 6+ WeChat, generate canvas deformation.

fail!

Summary: System-level BUG, ​​no solution...I don’t know what to do now...

----- ---------------------------------- Follow-up report September 12, 2013-------- ---------------------------------------------

Find a JavaScript written by a great person Plug-in for compiling jpg, javascript_jpeg_encoder.

Use this method to solve the problem that Android cannot compress images.

There are currently 2 system-level BUGs left.

1. The WeChat android version cannot respond to the upload control input style=file;

2. iPhone5 fails to generate canvas and the picture is distorted.

--------------------------------------- Follow-up Report 2 2013 October 10------------------------------------------------

There is also the ios-imagefile-megapixel plug-in written by a talented person, which solves the problem of iPhone5+ picture distortion.

There is currently 1 system-level BUG left.

The WeChat android version cannot respond to the upload control input style=file;

-------------------------- ------------- Follow-up Report 3 May 16, 2014--------------------------- ------------------

At present, all the problems have been solved. The plug-in has been established on github. Friends in need can get it. By the way, Time flies.

The above is the detailed content of Detailed explanation of HTML5 to implement the function of taking and uploading photos on WeChat. For more information, please follow other related articles on the PHP Chinese website!