画像の登録フォームにて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でコンテンツのスライド
jQueryもしくはJavaScriptでリンクを押すと 右から左にコンテンツを ...
jQueryで指定した可変(レスポンシブ)要素のposition / width / heightを取得する方法
jQueryで指定した要素のposition(leftやtop) / width ...
jQueryの画像スライダー用プラグイン「slick」の使い方
jQueryの画像スライダー用プラグイン「slick」の使い方についてソースコー ...
jQueryでimgタグのsrcを変える
やりたかった事はイベントに応じてimgタグの src内のURLを変更。attrを ...
Lightboxで画像拡大時に閉じるボタンの位置を右上に変更
Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...