画像の登録フォームにてjQueryプラグイン(piCEdit)を用いてWebカメラの映像を撮影させる方法
2024/01/13
form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものをアップロードするけど、Webカメラでその場で撮影させて、その画像をアップロードするjQueryプラグイン(piCEdit)があったので以下に使用方法のメモ。
piCEdit
https://github.com/andyvr/picEdit
サンプル
https://taitan916.info/sample/picEdit/
※画像を送信しても保存されません。
ソース
撮影するページ
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>picEditのテスト</title>
<link rel="stylesheet" type="text/css" href="./css/picedit.min.css" />
</head>
<body>
<form action="./out.php" method="post" enctype="multipart/form-data">
<input type="file" name="img" id="img">
<input type="submit" value="submit!!!">
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/picedit.min.js"></script>
<script type="text/javascript">
$(function() {
$('#img').picEdit();
});
</script>
</body>
</html>
保存するページ
<?php move_uploaded_file($_FILES['img']["tmp_name"], '/hoge/huga/xxx.jpg')); ?>
その他
WebRTCとかいうのがIEとsafariでは対応していないらしく、主要ブラウザだとfirefoxやchromeしか使えなさそう。
関連記事
-
-
jQueryのanimate()でページスクロール後に他の処理を実行させる方法
jQueryのanimate()でページスクロール後に特定の要素を非表示にしたい ...
-
-
Lightboxで画像拡大時にダウンロードリンクを設置する方法
Lightboxで画像拡大時にダウンロードリンクを設置したいと要望を受けた。もち ...
-
-
jQueryで指定の行動をとった際に、クリックイベントを発火させる方法
あるシステムでAという要素をクリックした際に何らかの処理を行うという部分があり、 ...
-
-
formのtextareaに文字を入力した内容をリアルタイムプレビューする方法
textarea内に書いた内容をリアルタイムでプレビューする機能が必要になった。 ...
-
-
jQueryにて特定のIDが存在するかチェックし分岐処理する方法
jQueryにて特定のIDが存在するかチェックし分岐処理したいというケースがあっ ...