Symfoware

Symfowareについての考察blog

HTML5 canvasで画像の矩形選択(clip)

画像の一部を矩形で範囲選択したく、Jcropを使おうとしたのですが、
開発も滞っており、jQueryの最新版(3系)では動きませんでした。

せっかくなので、jQueryプラグインを使用せず、
HTML5 canvasだけで実装できるか試してみます。


やりたいこと



こんな感じで、画像の一部をマウス操作で矩形選択したい。
730_01.png

※ネコの画像はこちらから引用しています。
Pixabay


こちらを参考にさせていただきました。
HTML5 canvasを使った矩形選択と選択範囲塗りつぶし


作成したサンプルはこちら。
rect select

ソースはこんな感じになります。


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>rect select</title>
  6. <script type="text/javascript">
  7. window.onload = function() {
  8.     var canvas = document.getElementById('drowing');
  9.     var context = canvas.getContext('2d');
  10.     var reacts = [];
  11.     
  12.     var imageObj = new Image();
  13.     imageObj.onload = function() {
  14.         canvas.width = imageObj.width;
  15.         canvas.height = imageObj.height;
  16.         draw();
  17.     };
  18.     imageObj.src = 'sample2_image.jpg';
  19.     
  20.     canvas.addEventListener("mousedown", onMouseDown, false);
  21.     canvas.addEventListener("mouseup" , onMouseUp , false);
  22.     window.addEventListener("keyup" , onKeyUp , false);
  23.     
  24.     // 矩形オブジェクト
  25.     var _rectangle = createRect();
  26.     
  27.     function createRect() {
  28.         return { startY:0, startX:0, endY:0, endX:0 };
  29.     };
  30.     
  31.     function onMouseDown (e) {
  32.         _rectangle.startY = e.clientY;
  33.         _rectangle.startX = e.clientX;
  34.         canvas.addEventListener ("mousemove", onMouseMove, false);
  35.     };
  36.     function onMouseMove (e) {
  37.         draw();
  38.         _rectangle.endY = e.layerY - _rectangle.startY;
  39.         _rectangle.endX = e.layerX - _rectangle.startX;
  40.         context.lineWidth = 5;
  41.         context.strokeStyle = "rgb(255, 0, 0)";
  42.         context.strokeRect (_rectangle.startX, _rectangle.startY, _rectangle.endX, _rectangle.endY);
  43.     };
  44.     function onMouseUp (e) {
  45.         reacts.push(_rectangle);
  46.         draw();
  47.         _rectangle = createRect();
  48.         canvas.removeEventListener ("mousemove", onMouseMove, false);
  49.     };
  50.     
  51.     function draw() {
  52.         context.drawImage(imageObj, 0, 0);
  53.         context.lineWidth = 5;
  54.         context.strokeStyle = "rgb(255, 0, 0)";
  55.         reacts.forEach(function(rect) {
  56.             context.strokeRect(rect.startX, rect.startY, rect.endX, rect.endY);
  57.         });
  58.     };
  59.     
  60.     function onKeyUp (e) {
  61.         switch(e.key) {
  62.             case 'z':
  63.                 reacts.pop();
  64.                 break;
  65.             default:
  66.                 return;
  67.         };
  68.         draw();
  69.     };
  70.     
  71. };
  72. </script>
  73.     
  74. </head>
  75. <body>
  76.     <div class="main">
  77.         <canvas id="drowing" class="drowing" width="0" height="0"></canvas>
  78.     </div>
  79.     <div>
  80.         <div>zキーで最新の矩形を削除</div>
  81.     </div>
  82. </body>
  83. </html>




canvasを二枚重ねても良かったのですが、制御が面倒だったので
毎回背景画像を描画しなおしてから、矩形を重ねています。

シビアな性能が求められる場合は一考の余地ありですが、
とりあえずの実装であればこれで十分そうです。

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2017/01/26(木) 23:33:47|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集

avconv jpg画像と音声ファイルから動画(mp4)を作成

avconv(ffmpeg)を使用して、動画から画像ファイル(jpg)と音声ファイル(aac,mp3)を抽出しました。
avconv(ffmpeg)でmp4の動画ファイルからjpg形式で画像を取り出す
avconv(ffmpeg) 動画ファイルから音声ファイルのみ抽出(aac,mp3)

出力した画像・音声を合成し、再度動画ファイルを作成してみます。





画像・音声の分割



復習として、画像と音声ファイルの抽出を行います。

・画像

target.mp4という動画ファイルからjpg画像を連番で出力


# avconv -i target.mp4 -vsync 1 -r 25 -an -y -qscale 1 image/out_%04d.jpg




1分程度の動画ファイルから1,715枚のjpg画像が抽出出来ました。



・音声

aac形式で音声ファイルを抽出します。


# avconv -i target.mp4 -c:a copy -vn -y out.aac




これで、imageフォルダに動画ファイルから抽出した画像、
out.aacに音声ファイルが取得できました。






動画・音声の結合



まず、画像を結合してmov形式の動画ファイルを作成します。


# avconv -framerate 25 -f image2 -i image/out_%04d.jpg -c:v h264 -crf 1 no_sound.mov




これで音声の入っていない動画ファイル「no_sound.mov」ができました。
これに音声を付与しつつ、mp4形式に変換します。


# avconv -i no_sound.mov -i out.aac -c:v libx264 -strict experimental result.mp4




ここで、「-strict experimental」オプションを指定していないと、

encoder 'aac' is experimental and might produce bad results.
Add '-strict experimental' if you want to use it.

というエラーが発生します。


この手順で、「result.mp4」という動画ファイルに復元できました。
※ファイルサイズは大きくなってしまいましたが。





【参考URL】

Snippets avconv
avconv Documentation
Convert from .mov to .mp4 (or h264) using avconv
avconvコマンドでtsファイルを分割(split)
Unixでwmvファイルを他のファイルフォーマットに変換したい

テーマ:サーバ - ジャンル:コンピュータ

  1. 2017/01/25(水) 00:33:29|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集

avconv(ffmpeg) 動画ファイルから音声ファイルのみ抽出(aac,mp3)

動画(mp4)ファイルの音声のみをavconvで抽出してみます。

avconvのインストールはこちら。
avconv(ffmpeg)でmp4の動画ファイルからjpg形式で画像を取り出す


aac形式



こちらを参考にしました。
avconv


以下のコマンドで、aac形式で音声が抜き出せます。


# avconv -i target.mp4 -c:a copy -vn -y out.aac







mp3形式



mp3形式で出力する場合はこちらを参考にしました。
Converting WEBM to MP3

コーデックに「libmp3lame」を指定するか


# avconv -i target.mp4 -c:a libmp3lame -vn -y out.mp3




コーデック未指定で出力すれば良いようです。


# avconv -i target.mp4 out.mp3

テーマ:サーバ - ジャンル:コンピュータ

  1. 2017/01/24(火) 23:45:36|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集

avconv(ffmpeg)でmp4の動画ファイルからjpg形式で画像を取り出す

Python YouTubeの動画をダウンロード(pytube,Pafy)

ここで取得したmp4形式の動画ファイルを1秒毎にjpg画像で切り出してみます。



avconv



画像の切り出しはdebian 8で行いました。

動画といえばffmpegだろうと思っていたのですが、
https://wiki.debian.org/ffmpeg

今はffmpegからフォークしたavconvがパッケージに登録されているようです。
apt-getでインストール。


# apt-get install libav-tools







画像の切り出し



ここが参考になりました。

https://gist.github.com/patrickward/7799742

https://wiki.libav.org/Snippets/avconv



# avconv -i target.mp4 -vsync 1 -r 1 -an -y -qscale 1 '%4d.jpg'



これで1秒毎に連番のjpgファイルが出力されました。
「-qscale 1」のオプションを指定して、jpgのクオリティーを上げておくと
劣化の少ない画像が取得できます。




テーマ:プログラミング - ジャンル:コンピュータ

  1. 2017/01/24(火) 00:22:07|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集

汎用SQLクライアント「DBeaver」を Ubuntu 16.04へインストール

データベースサーバーに対してSQLを実行したい時、
普段は「HeidiSQL」を使用しています。

UbuntuでSQLを実行したい時、wineでHeidiSQLを実行すれば良いのですが、
sshトンネルがうまく動かせず困っていました。


DBeaver



DBeaver
Free Universal SQL Clientとのこと。

Java製のツールのようです。
Ubuntu 16.04にインストールして動かしてみます。


http://dbeaver.jkiss.org/download/
こちらから、Linux Debian package 64 bit (installer)をクリック。

728_01.png


ダウンロードした「dbeaver-ce_3.8.3_amd64.deb」をダブルクリックするとインストールできました。

728_02.png



起動と接続設定



dashで「db」ぐらいまで入力すると候補に表示されると思います。
アイコンをクリックして起動します。

728_03.png


初回起動時、データベースへの接続ウィザードが始まります。
接続できるデータベースの種類が多いです。
JDBCドライバーが用意されているデータベースは候補として選択できるようでした。

今回はMariaDBを選択しました。

728_04.png


接続情報を入力しています。

728_05.png

728_06.png

728_07.png


接続時、必要なドライバーがローカルに存在しない場合、jdbcドライバのダウンロード要求画面が表示されます。
「Download」をクリックして取得します。

728_08.png


接続できました。
Eclipseをベースにした画面のようですね。

728_09.png



SQLの実行



SQLを直接実行するには、「F3キー」を押してSQL Editorタブを追加。
SQL文を入力後、「Ctrl + Enter」で実行できます。

728_10.png


しばらく使ってみようと思います。




テーマ:プログラミング - ジャンル:コンピュータ

  1. 2017/01/22(日) 21:33:27|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
次のページ