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. | 編集
<<Python webサーバー、フレームワークを使用せずにwebアプリ作成 | ホーム | Python Windows で serve_foreverの実行がCtrl + Cで停止しない>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/1958-b1fe5fa9
この記事にトラックバックする(FC2ブログユーザー)