Clever Geek Handbook

Androidスマートフォンから直接HTML形式で写真を取得する

こんにちは



画像



オンラインストアが多数の製品を撮影するタスクがありました。 製品の仕様は、美しい写真が製品のデザイン機能ほど重要ではないようなものです（どちら側がケーブルであるか、取り付けループがあるかなど）。



通常のカメラで写真を撮り、コンピューターに写真をアップロードし、管理パネルで各製品を検索してから、対応する写真を検索するのは非常に時間がかかりました。 管理パネルで製品を開き、電話を製品に向ける方がはるかに簡単です。 さらに、露出の良い照明の下では、最新のスマートフォンは非常に高品質の画像を提供します。



理論



Android市場には、 IpWebCamという素晴らしいプログラムがあります。これにより、携帯電話を本格的なWebカメラに変えることができます。 さらに、彼女はオートフォーカスで写真を撮るためのAPIを持っています。 IpWebCamが起動すると、Webサーバーが電話で立ち上がり、192.168.0.14：8080 / shot.jpgという形式のアドレスにあるローカルマシンからwifi経由で電話から現在のフレームを受信できるようになります。



アイデアは次のとおりです。

  1. スマートフォンからの写真のアドレスをフォーム<img>に貼り付けます
  2. キャンバスを作成し、<img>のコンテンツをそこにコピーします
  3. canvas.toDataURL（）でデータを保存します
  4. ajaxを使用してサーバーにデータを送信する




残念ながら、クロスドメインポリシーのため、toDataURL（）メソッドは画像ではなく黒い四角のみを保存します。 したがって、キャンバスは画像の取得元と同じドメイン上に作成する必要があります。 プログラムのウェブサイトにアクセスして 、IpWebCamを使用すると、内部サーバーに独自のhtmlページを作成できることを知りました。 これを行うには、それらをsdカードにアップロードして、どのフォルダーを探すかをプログラムに指示します。



アルゴリズムは次のとおりです。

  1. スマートフォンで、特別なページ（my.htmlなど）を作成します
  2. Webサイトのフォームで<iframe>を作成し、そこにスマートフォンからhtmlページをロードします。
  3. htmlページの電話で、カメラから画像を読み込むキャンバスを作成します。
  4. canvas.toDataURL（）を使用して変数にデータを保存する
  5. window.postMessage（）を使用して親ページにデータを渡します
  6. 親ページで画像を取得し、ajaxを使用してサーバーにデータを送信します
  7. サーバーで、画像をファイルに保存します。


解決策



まず、 市場のIpWebCamプログラムをスマートフォンに配置します。



スマートフォンにウェブカメラフォルダーを作成し、その中に次のコンテンツを含むmy.htmlファイルを作成します。 

Content-Type: text/html <html> <head> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.jplayer.min.js"></script> <script type="text/javascript" src="common.js"></script> <style> * { margin: 0; padding: 0} </style> <script type="text/javascript"> $(loadJsWindowed); function shot() { $('#msg').text('Please wait...'); var img = new Image(); img.onload = function(){ var canvas = $('<canvas width="' + img.width + '" height="' + img.height + '">'); canvas[0].getContext('2d').drawImage(img, 0, 0); var data = canvas[0].toDataURL('image/jpeg').replace(/data:image\/jpeg;base64,/, ''); canvas.remove(); //    window.parent.postMessage(data, '*'); } img.src = 'photoaf.jpg'; } </script> </head> <body> <div id="msg" style="text-align: center; background-color: #000000; color: #FFFFFF; font-weight: bold; cursor: pointer;" onclick="shot();">Click to take a shot..</div> <img id="img1" src="/shot.jpg?1" style="cursor: pointer; position:absolute;"/> <img id="img2" src="/shot.jpg?2" style="cursor: pointer; position:absolute;"/> </body> </html>


ファイルの先頭には、HTTPヘッダーと、ページのメインコンテンツの前に空の行があることに注意してください。 基礎は、プログラム自体からjavascriptビデオプレーヤーを取得しました。



次に、アプリケーションのWebサーバーのファイルを探す場所を指定する必要があります。 これを行うには、電話でプログラムを開き、ハードキーメニューボタンを押して、チート項目のみを選択します。 開いたダイアログでsetコマンド（HtmlPath、/ sdcard / webcam）を入力します。 コンマの後にスペースを入れないでください。



サーバーで、jquery.ipwebcam.jsプラグインのjqueryファイルを作成します。 

 (function($) { $.fn.ipWebCam = function(options) { var settings = $.extend( { ip: '', width: 640, height: 480, action: '?', callback: function(){} }, options); function ipWebCam_listener(event){ $('#ipWebCam_wnd').prev().remove(); $('#ipWebCam_wnd').remove(); $.post(settings.action, {data:event.data}, settings.callback); } if (window.addEventListener){ window.addEventListener('message', ipWebCam_listener,false); } else { window.attachEvent('onmessage', ipWebCam_listener); } return this.each(function() { $(this).click(function(){ if(settings.ip=='') settings.ip = prompt('IP Webcam address:'); $('<iframe>').css({ position: 'fixed', width: settings.width + 'px', marginLeft: '-' + (settings.width/2) + 'px', left: '50%', height: settings.height + 'px', marginTop: '-' + (settings.height/2) + 'px', top: '50%', border: 0, overflow: 'hidden', backgroundColor: '#777777' }) .attr('width', settings.width) .attr('height', settings.height) .attr('src', 'http://' + settings.ip + ':8080/my.html') .attr('id', 'ipWebCam_wnd') .prependTo('body'); $('<div>').css({ position:'fixed', left: 0, top: 0, right:0, bottom:0, backgroundColor: '#000000', opacity: 0.5 }).click(function(){ $('#ipWebCam_wnd').prev().remove(); $('#ipWebCam_wnd').remove(); }).prependTo('body'); }); }); }; })( jQuery )


プラグインはダイアログ呼び出しボタンにしがみついています。 例： 

 $('#camera_button').ipWebCam({ ip: '', //ip  ,   ,     prompt action: 'save_img.php', //   ,      callback: function(rep){ //        window.location.reload(); }, width: 640, //  iframe height: 480 });


プラグインは、データ変数のPOSTメソッドを使用してデータをサーバーに転送します。 ファイルをphpに保存します。 

 if(isset($_POST['data'])) { $name = 'img/shot.jpg'; //,     base64 file_put_contents($name, base64_decode($_POST['data'] )); echo 'ok'; }


それだけです。だれかが重宝するなら、嬉しいです。



updアイデアは、管理者が大型コンピューターの管理パネルで作業する方が便利だということです（写真を撮るだけではありません）。 スマートフォンは三脚の上に置かれ、触れません。 直接撮影（プレビューとシャッターを押す）は、大きなコンピューターで行われるため、再度電話に出かけることはありません。 したがって、写真自体を大型コンピューターのhtmlフォームに直接転送する必要があります。 これは、Webサーバーをスマートに持ち上げることによってのみ実行できます。 プログラムを自分で作成することもできますが、なぜ既製のソリューション-IpWebCamをすでに持っているのでしょうか。


More articles:


All Articles