勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

画像の登録フォームにてjQueryプラグイン(piCEdit)を用いてWebカメラの映像を撮影させる方法

   2024/01/13  jQuery JavaScript

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 JavaScript

  関連記事

jQueryで配列の値を検索

やりたかった事は、配列の中に特定の値があるか どうか検索し、その後の分岐を行いた ...

jQuery UIでカレンダーピッカー(Datepicker)の利用方法

フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際 ...

SNSのシェア(いいね)ボタンを設置できるjQueryプラグイン「jsSocials」の利用方法

サイト内にSNSのシェア(いいね)ボタンを設置する際、WordPressだと何ら ...

簡単にtable内をソート

やりたかった事は、 ・テーブル内でのソート ・内容は文字、数値、日時 ・PHPじ ...

JavaScript / jQueryにてページ表示時に指定したテキストボックスにフォーカスさせる方法

ページを開いた際に指定したテキストボックス(input type="text") ...