ホーム > カテゴリ > HTML5・JavaScript >

画像をマウスで範囲選択する[Canvasの矩形選択1]

HTML5のCanvasに描画されている画像の上をマウスのドラッグで範囲を選択する方法です。描画される矩形の枠線は点線で、簡易的ですが自動的に反転色になるようにしています。

<注意事項>
ブラウザによってはローカル環境ではセキュリティエラーでサンプルを実行できませんので、サーバーにアップしてから動作確認をして下さい。

実際に試してみる

画像の上をマウスでドラッグしてください。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>

// キャンバス
var src_canvas; 
var src_ctx;

// イメージ
var image;

// 矩形用
var rect_MousedownFlg = false;
var rect_fx = 0;
var rect_fy = 0;
var rect_ex = 0;
var rect_ey = 0;

window.onload = function () {
  
  src_canvas = document.getElementById("SrcCanvas");
  src_ctx = src_canvas.getContext("2d");    
  
  image = document.getElementById("img_source");       
}

// 色の反転
function getTurningAround(color) {

 // 灰色は白にする 
 if(color >= 88 && color <= 168){
   return 255;
 // 色を反転する  
 }else{
   return 255 - color;
 }
}

function OnMousedown(event) {

  rect_MousedownFlg = true;
  
  // 座標を求める
  var rect = event.target.getBoundingClientRect();
  rect_fx = event.clientX - rect.left;
  rect_fy = event.clientY - rect.top; 
  
  // 矩形の枠色を反転させる  
  var imagedata = src_ctx.getImageData(rect_fx, rect_fy, 1, 1);   
  src_ctx.strokeStyle = 'rgb(' + getTurningAround(imagedata.data[0]) +
                           ',' + getTurningAround(imagedata.data[1]) + 
                           ',' + getTurningAround(imagedata.data[2]) + ')';  
  // 線の太さ                         
  src_ctx.lineWidth = 2; 
  
  // 矩形の枠線を点線にする
  src_ctx.setLineDash([2, 3]);                             
}

function OnMousemove(event) {
  
  if(rect_MousedownFlg){
    
    // 座標を求める
    var rect = event.target.getBoundingClientRect();
    rect_ex = event.clientX - rect.left;
    rect_ey = event.clientY - rect.top; 

    // 元画像の再描画
    src_ctx.drawImage(image,0,0);  
    
    // 矩形の描画
    src_ctx.beginPath();

      // 上
      src_ctx.moveTo(rect_fx,rect_fy);
      src_ctx.lineTo(rect_ex,rect_fy);

      // 下
      src_ctx.moveTo(rect_fx,rect_ey);
      src_ctx.lineTo(rect_ex,rect_ey);

      // 右
      src_ctx.moveTo(rect_ex,rect_fy);
      src_ctx.lineTo(rect_ex,rect_ey);

      // 左
      src_ctx.moveTo(rect_fx,rect_fy);
      src_ctx.lineTo(rect_fx,rect_ey);

    src_ctx.stroke();
  }
}

function OnMouseup(event) {
  rect_MousedownFlg = false;
}

function onDragOver(event){ 
  event.preventDefault(); 
} 
  
function onDrop(event){
  onAddFile(event);
  event.preventDefault(); 
}  

// ユーザーによりファイルが追加された  
function onAddFile(event) {
  var files;
  var reader = new FileReader();
  
  if(event.target.files){
    files = event.target.files;
  }else{ 
    files = event.dataTransfer.files;   
  }    

  // ファイルが読み込まれた
  reader.onload = function (event) {
    
    // イメージが読み込まれた
    image.onload = function (){
      src_canvas.width  = image.width;
      src_canvas.height = image.height;
        
      // キャンバスに画像を描画
      src_ctx.drawImage(image,0,0); 
    };      
       
    // イメージが読み込めない
    image.onerror  = function (){
      alert('このファイルは読み込めません。');  
    };

    image.src = reader.result;       
  };
  
  if (files[0]){    
    reader.readAsDataURL(files[0]); 
    document.getElementById("inputfile").value = '';
  } 
}         
</script>
</head>
<body ondrop="onDrop(event);" ondragover="onDragOver(event);" > 
  <input type="file" id="inputfile" accept="image/jpeg,image/png,image/gif,image/bmp,image/x-icon" onchange="onAddFile(event);">
  <img id="img_source" style="display:none;">
  <p></p>  
  <canvas id="SrcCanvas" onmousedown="OnMousedown(event);" onmousemove="OnMousemove(event);" onmouseup="OnMouseup(event);"></canvas>
</body>
</html>

このサンプルの解説は特にしませんが、ソースコードの中にコメントを書いてますのでそちらから読み取ってくださいね。

注意事項としてはsetLineDashメソッドは線を点線にする機能です。IE11以降で有効となります。IE10以下に対応する場合はsetLineDashを使用しない、またはstrokeRectメソッドで矩形を描画する必要があります。

CanvasRenderingContext2D.setLineDash()





関連記事


前の記事：Webストレージの使い方[HTML5]
次の記事：マウスで指定した範囲の画像を取得する[Canvasの矩形選択2]

公開日：2016年11月15日 最終更新日：2016年11月19日
記事NO：02205