画像の登録フォームにて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しか使えなさそう。
関連記事
テキストエリアを選択すると中身を全選択状態にする方法
テキストエリアやテキストボックスの中に文字が書いてあり、ドラッグをしなくても、そ ...
formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)
フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...
lightboxをファイルアップロードなしで使う(CDN)方法
本番実装時ならともかく、テスト用とかでlightboxみたいによく使うプラグイン ...
スマホ対応のjQueryのカラーピッカープラグイン「excolor」の利用方法
以前の記事でカラーピッカープラグインのことを書いたけどスマホでは使えない。なので ...
jQueryでiframe内の要素を呼び出し
jQueryでiframeで開いたbody内の内容が欲しかった。 ■jQuery ...