画像をマウスで範囲選択する[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()
スポンサーリンク
関連記事
公開日：2016年11月15日 最終更新日：2016年11月19日
記事NO：02205
プチモンテ ※この記事を書いた人
 | |
| 💻 ITスキル・経験 サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。 画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ |
| 🎵 音楽制作 BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は抒情詩、抒情的な楽曲が多い。楽曲制作は🔰2023年12月中旬 ～ | |
