WeChatに写真を撮ってアップロードする機能を実現するためのHTML5を詳しく解説

この記事は主に、WeChat の写真撮影とアップロード機能の HTML5 実装、HTML5 Canvas の携帯​​電話撮影の実装、および写真をローカルで圧縮してアップロードする際に発生する問題の解決策を紹介します。興味のある友人は参考にしてください。それ

WeChat用のHTML5写真アップロード機能を作りましたが、色々問題がありました…

フロントエンドコード

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

 });

バックエンドコード

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

実際のテスト:

コンピューターのバージョン

Chrome バージョン 29、正常にアップロードされました、ソース画像 3M、圧縮 1024* 比率、約 250kb 合格!

モバイル端末

Androidバージョン4+、WeChat、クリックしてアップロードしますが応答なし、モバイルブラウザで開いてアップロード、撮影約3M、圧縮1024*比率、約3M、圧縮はまったくありません！ ！ ！ 失敗しました！

iphone4 & 4s バージョン 6+ WeChat、約 3M で撮影、1024* 比率に圧縮、約 250kb 合格!

iPhone5 バージョン 6+ WeChat、キャンバス変形を生成します。 失敗しました！

概要: システムレベルのバグ、解決策なし...今何をすべきかわかりません...

----------------- ------------------------------------ 続報 2013年9月12日---------------------- --------- -----------------------

素晴らしい人、javascript_jpeg_encoder によって書かれた JavaScript コンパイル jpg プラグインを見つけました。

Androidが画像を圧縮できない問題を解決するには、この方法を使用してください。

現在、システムレベルのバグが 2 つ残っています。

1. WeChat Android バージョンはアップロード コントロールの入力 style=file に応答できません。

2. iPhone5 はキャンバスの生成に失敗し、画像が歪みます。

------------------------------------------ 続報 10月2日2013 年 10 月 --------------------------------------

才能のある人によって書かれた ios-imagefile-megapixel プラグインは、iPhone5+ の画面の歪みの問題を解決します。

現在、システムレベルのバグが 1 つ残っています。

WeChat Android バージョンはアップロード コントロール input style=file;に応答できません;

-------------------------------- -- -----続報3 2014年5月16日 ---------------------------------- -- --------

現在、プラグインはすべて解決されており、必要な方はすぐに入手できます。

以上がWeChatに写真を撮ってアップロードする機能を実現するためのHTML5を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。