最近構築したマーチャント バックエンドでは、チェックインしているユーザーの写真を撮るためにカメラを呼び出す機能を実装する必要がありました。情報を探して研究しました。最終的に、Huang Tian が功を奏して、成功しました。コードをステップごとに投稿します。以下の手順に従ってください。役立つことを願っています。
コードは少し長いですが、各ステップは理解しやすいです。最初は HTML コードです。フォームを作成します。画像をアップロードするときが来たら、ajax が非同期で送信します。他のjsを導入する必要がある h5に直接調整できるメソッドがある メディアデバイスを取得する
ただし、Google、QQ、360 などの多くのブラウザでは、セキュリティ上の理由により、HTTPS プロトコルを持たない Web サイトは安全でないとみなされることに注意してください。 HTTPS 証明書をサーバーにインストールしました。
テスト期間中、ブラウザのデフォルトでフラッシュやカメラの機能がオフになっており、開くことができませんでした。さまざまな入り口を探しましたが、チェックインボタンはありませんでした。最後に Try Firefox を試してみました。Firefox は取得できるため、テスト段階での開発には Firefox ブラウザを使用することをお勧めします。
要件:
写真を撮った後、写真と写真は同じ位置で撮影する必要があります。今後、ビデオ ボックスに写真が表示されます。再撮影したい場合は、[カメラを有効にする] ボタンをクリックしてください。ビデオ ボックスは次のようになります。と表示されて写真が非表示になりますので、「撮影」をクリックし、撮影が成功したら「アップロード」をクリックしてください。
ビデオ ボックスに、以下に示す進行状況バーが表示されているように、カメラが正常に呼び出されました:
クリックして写真を撮ります。撮影は完了です。成功すると、左側のボタンにカメラの起動が表示されます。実際には、クリックしてカメラを起動しないでください。満足できず、クリックして写真を撮る場合は、写真を撮ることはできますが、画面が表示されません
撮影が完了しました。[アップロード] をクリックして、データ操作のためにバックグラウンドにアップロードします。
スタイル ファイル:.coach-price{display: none}
.input-but{display: inline-flex;}
#canvas{display: none}
#showVideo{display: none}
#input-picture{width:100%;}
HTML代码:
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5 id="打卡头像">打卡头像</h5>
</div>
<div class="ibox-content img-content">
<form class="form-horizontal m-t" id="upPictureForm" method="post" action="">
<div class="form-group " id="input-picture">
<div class="img-box" id="results">
<input name="image_code" id="image_code" type="hidden" value=""/>
<input name="userId" class="userId" type="hidden" value=""/>
//这是一个画布的容器
<canvas id="canvas" width="300" height="260"></canvas>
</div>
</div>
<div class="form-group ">
//要拍照的视频框
<video id="video" controls>
</video>
</div>
<div class="form-group ">
//各种按钮
<div class="input-but">
<button type="button" class="layui-btn" id="showVideo">
激活摄像头
</button>
<button type="button" class="layui-btn" id="capture">
<i class="layui-icon"></i>拍照
</button>
<button type="button" id="uppicture" class="layui-btn" >
<i class="layui-icon"></i>上传
</button>
</div>
</div>
</form>
</div>
</div>
<script> //访问用户媒体设备的兼容方法 function getUserMedia(constraints, success, error) { if (navigator.mediaDevices.getUserMedia) { //最新的标准API navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error); } else if (navigator.webkitGetUserMedia) { //webkit核心浏览器 navigator.webkitGetUserMedia(constraints,success, error) } else if (navigator.mozGetUserMedia) { //firfox浏览器 navigator.mozGetUserMedia(constraints, success, error); } else if (navigator.getUserMedia) { //旧版API navigator.getUserMedia(constraints, success, error); } } function success(stream) { //兼容webkit核心浏览器 let CompatibleURL = window.URL || window.webkitURL; //将视频流设置为video元素的源 console.log(stream); //video.src = CompatibleURL.createObjectURL(stream); video.srcObject = stream; video.play(); } function error(error) { alert(`访问用户摄像头失败${error.name}, ${error.message}`); } //从 canvas 提取图片 image function convertCanvasToImage(canvas) { //新Image对象,可以理解为DOM var image = new Image(); // canvas.toDataURL 返回的是一串Base64编码的URL // 指定格式 PNG image.src = canvas.toDataURL("image/png"); return image; } function getnavigator() { if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) { //获取video宽高 var v_height,v_width; var myvObj = document.getElementById("video"); myvObj.addEventListener("loadedmetadata", function () { v_height = this.videoHeight; v_width =this.videoWidth; $('#canvas').attr('width',v_width); $('#canvas').attr('height',v_height); }); //调用用户媒体设备, 访问摄像头 getUserMedia({video : {width: 320, height: 240}}, success, error); } else { alert('不支持访问用户媒体'); } } getnavigator(); function showVideo(){ $('#results').find('img').remove(); $('#canvas').css('display','none'); $('#video').css('display','block'); $('#showVideo').css('display','none'); getnavigator(); } function showpicture(picture) { if($('#results').find('img').attr('src')){ $('#results').find('img').attr('src',picture); }else{ $('#results').append('<img src="/static/imghwm/default1.png" data-src="'+picture+'" class="lazy" / alt="PHPを使用してカメラを呼び出してカメラ機能を実装する方法" >'); } $('#video').css('display','none'); $('#canvas').css('display','none'); $('#showVideo').show(); $('.picture').val(1); } function hidepicture() { $('#results').find('img').remove(); getnavigator(); $('#video').css('display','block'); $('#canvas').css('display','none'); $('#showVideo').css('display','none'); } $('#showVideo').click(function () { showVideo(); }); document.getElementById('capture').addEventListener('click', function () { let video = document.getElementById('video'); let canvas = document.getElementById('canvas'); let context = canvas.getContext('2d'); context.drawImage(video, 0, 0); //获取网页中的canvas对象 var mycans=$('canvas')[0]; //调用convertCanvasToImage函数将canvas转化为img形式 var img=convertCanvasToImage(mycans); if(img.src){ $('#results').find('#image_code').val(img.src); // $('#capture').text('修改'); $('#video').css('display','none'); $('#canvas').css('display','block'); $('#showVideo').show(); } }) //点击图片上传按钮 $('#uppicture').click(function () { var userId = $('.userId').val(); var image_code = $('#image_code').val();//图片值 if(!userId){ alert('用户不存在');return; } if(!image_code){ alert('请先拍照');return; } $.post("{:url('upPicture')}", {'userId':userId,'image_code':image_code}, function(res){ // console.log(res); if(1 == res.code){ layer.alert(res.msg, {title: '友情提示', icon: 1}); $('.picture').val(1); }else{ layer.alert(res.msg, {title: '友情提示', icon: 2}); } }); }); </script>
バックグラウンドに送信され、PHP がそれを処理し、フレームワークに送信されます。使用されるのは tp5 なので、後で戻るときに tp の成功とエラーを直接使用すると非常に便利です。その最初のパラメータは msg 、2 番目は URL、3 番目のパラメータは data です。 public function upPicture(){
$image_code = input('image_code');
if(empty($image_code)){
$this ->error('照片为空');
}
$uId = input('userId');
//处理接收过来的图片
$img = str_replace('data:image/png;base64,', '', $image_code);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
// 图片名称
$file_name = "./uploads/head/".time().".png";
$fp = fopen($file_name, 'w');
fwrite($fp, $data);
fclose($fp);
$array = array(
"picture" => substr($file_name,1)
);
$res = Db::table("table")->where("userId",$uId)->setField($array);
if($res){
$this ->success('编辑成功!');
}else{
$this ->error('编辑失败,请刷新重试!');
}
}
関連する推奨事項:「
以上がPHPを使用してカメラを呼び出してカメラ機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

PHPでは、特性は方法が必要な状況に適していますが、継承には適していません。 1)特性により、クラスの多重化方法が複数の継承の複雑さを回避できます。 2)特性を使用する場合、メソッドの競合に注意を払う必要があります。メソッドの競合は、代替およびキーワードとして解決できます。 3)パフォーマンスを最適化し、コードメンテナビリティを改善するために、特性の過剰使用を避け、その単一の責任を維持する必要があります。

依存関係噴射コンテナ(DIC)は、PHPプロジェクトで使用するオブジェクト依存関係を管理および提供するツールです。 DICの主な利点には、次のものが含まれます。1。デカップリング、コンポーネントの独立したもの、およびコードの保守とテストが簡単です。 2。柔軟性、依存関係を交換または変更しやすい。 3.テスト可能性、単体テストのために模擬オブジェクトを注入するのに便利です。

SplfixedArrayは、PHPの固定サイズの配列であり、高性能と低いメモリの使用が必要なシナリオに適しています。 1)動的調整によって引き起こされるオーバーヘッドを回避するために、作成時にサイズを指定する必要があります。 2)C言語アレイに基づいて、メモリと高速アクセス速度を直接動作させます。 3)大規模なデータ処理とメモリに敏感な環境に適していますが、サイズが固定されているため、注意して使用する必要があります。

PHPは、$ \ _ファイル変数を介してファイルのアップロードを処理します。セキュリティを確保するための方法には次のものが含まれます。1。アップロードエラー、2。ファイルの種類とサイズを確認する、3。ファイル上書きを防ぐ、4。ファイルを永続的なストレージの場所に移動します。

JavaScriptでは、nullcoalescingoperator(??)およびnullcoalescingsignmentoperator(?? =)を使用できます。 1.??最初の非潜水金または非未定されたオペランドを返します。 2.??これらの演算子は、コードロジックを簡素化し、読みやすさとパフォーマンスを向上させます。

XSS攻撃を防ぎ、リソースのロードを制限し、ウェブサイトのセキュリティを改善できるため、CSPは重要です。 1.CSPはHTTP応答ヘッダーの一部であり、厳格なポリシーを通じて悪意のある行動を制限します。 2。基本的な使用法は、同じ起源からのロードリソースのみを許可することです。 3.高度な使用法は、特定のドメイン名がスクリプトやスタイルをロードできるようにするなど、より微調整された戦略を設定できます。 4。CSPポリシーをデバッグおよび最適化するには、コンテンツセキュリティポリシーレポートのみのヘッダーを使用します。

HTTPリクエストメソッドには、それぞれリソースを取得、送信、更新、削除するために使用されるGET、POST、PUT、および削除が含まれます。 1. GETメソッドは、リソースを取得するために使用され、読み取り操作に適しています。 2. POSTメソッドはデータの送信に使用され、新しいリソースを作成するためによく使用されます。 3. PUTメソッドは、リソースの更新に使用され、完全な更新に適しています。 4.削除メソッドは、リソースの削除に使用され、削除操作に適しています。

HTTPSは、HTTPに基づいてセキュリティレイヤーを追加するプロトコルであり、主に暗号化されたデータを介してユーザーのプライバシーとデータセキュリティを保護します。その作業原則には、TLSの握手、証明書の確認、暗号化された通信が含まれます。 HTTPSを実装する場合、証明書管理、パフォーマンスへの影響、および混合コンテンツの問題に注意を払う必要があります。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!

メモ帳++7.3.1
使いやすく無料のコードエディター

ホットトピック



