コメント：HTML5仕様のサポートにより、WebAppが携帯電話で写真を撮ることができるようになりました。以下では、Webアプリが携帯電話で写真を撮り、ページに表示し、サーバーにアップロードする方法を説明します。
1。ビデオストリーミング
HTML5メディアキャプチャAPIはカメラへのプログラム可能なアクセスを提供し、ユーザーはGetUsermediaを使用してカメラが提供するビデオストリームを取得することができます。必要なのは、HTML5ビデオタグを追加し、このタグの入力ソースとしてカメラからビデオを取得することです（ChromeとOperaのみが現在GetUsermediaをサポートしていることに注意してください）。
<videoidvideoid = videoAutoplay = "> </video>
<スクリプト>
varvideo_element = document.getElementById（ 'Video'）;
if（navigator.getusermedia）{// operashoulduseopera.getusermedianow
navigator.getusermedia（ 'ビデオ'、成功、エラー）;
}
functionsuccess（stream）{
video_element.src = stream;
}
</script>
ビデオストリーミング
2。写真を撮ります
写真撮影機能については、HTML5キャンバスを使用してビデオタグのコンテンツをリアルタイムでキャプチャし、ビデオ要素をキャンバス画像への入力として使用できます。メインコードは次のとおりです。
JavaScriptコードコピーコンテンツにクリップボードに
var canvas = document.createelement（ 'canvas'）;
var ctx = canvas.getContext（ '2d'）;
var cw = vw;
var ch = vh;
ctx.fillstyle =＃ffffff;
ctx.fillrect（0,0、cw、ch）;
ctx.drawimage（video_element、0,0、vvw、vvh、0,0、vw、vh）;
document.body.append（canvas）;
3。画像の獲得
次に、Canvasから画像データを取得します。核となるアイデアは、CanvasのTodataurlを使用して、データの形式：Image/PNG; Base64、XXXXXと同様に、Canvasのデータをbase64ビットエンコードされたPNG画像に変換することです。
var imgdata = canvas.todataurl（image/png）;
実際の画像データはBase64エンコードされたコンマの後のパーツであるため、実際のサーバーによって処理された画像データはこの部分である必要があり、2つの方法で取得できます。
最初のタイプは、フロントエンドの画像データとして22ビット文字列を傍受することです。
var data = imgdata.substr（22）;
アップロードする前に画像のサイズを取得したい場合は、以下を使用できます。
var length = atob（data）.length; // atobdecodeSastringofdatawhasbeencodedisingbase-64Encoding
2番目のタイプは、バックエンドで送信されたデータを取得し、背景言語の22ビット文字列をインターセプトすることです。たとえば、PHP：
$ image = base64_decode（str_replace（ 'data：image/jpeg; base64、' ,, $ data）;
4。写真をアップロードします
フロントエンドでは、Ajaxを使用して、上記の画像データを背景スクリプトにアップロードできます。たとえば、jQueryを使用する場合：
$ .post（ 'upload.php'、{'data'：data}）;
背景では、PHPスクリプトを使用してデータを受信し、写真として保存します。
functionconvert_data（$ data）{
$ image = base64_decode（str_replace（ 'data：image/jpeg; base64、' ,, $ data）;
save_to_file（$ image）;
}
functionsave_to_file（$ image）{
$ fp = fopen（$ filename、 'w'）;
fwrite（$ fp、$ image）;
fclose（$ fp）;
}
上記のソリューションは、Webアプリの写真のアップロードに使用できるだけでなく、Canvas出力を画像アップロードに変換することもできます。このようにして、Canvasを使用して、ユーザーにトリミング、着色、グラフィティアートボード機能などの画像編集を提供し、ユーザーの編集された写真をサーバーに保存できます。