気楽なソフト工房

プログラミングについていろいろな記事を書いています。



mykonos2008

Author:mykonos2008
システムエンジニアとして働いている30代の会社員です。
仕事や趣味でプログラムを書いている方の役に立つ記事を書いていきたいと思っています。
ご意見、ご感想はこちらまで
If you are an english speaker,Please visit my english blog.

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
CSSとjQueryで画像をトリミング(画像の一部分の切り抜き)して表示する方法をご紹介します。
実際にトリミングされた画像をファイルとして保存する場合は、サーバ側で処理をする必要があります。
この記事では、ブラウザ上で画像の一部を表示したり、表示する部分をマウスで動かしたりする方法を紹介します。

縮小表示
 トリミング表示

CSSで画像を切り抜く


まず、画像の切り抜き表示をやってみます。画像の切り抜き表示はCSSだけで出来ます。
以下のようにimgタグをdivタグで囲みます。

<div id="outer">
  <img id="image" src="image.jpg"/>
</div>

そして、CSSでそれぞれのタグのスタイルを以下のように設定します。

#outer {
  position:relative;
  width : 250px;
  height : 200px;
  overflow:hidden;
  border: 1px solid lightgray;
}

#image {
  position:absolute;
  left:-100px;
  top:-100px;
}

まず、divタグに切り抜く領域のサイズを指定します。今回、使用する画像のサイズは900×600なので、それより
小さなサイズになるように、widthとheightを指定しています。

次にdivタグのoverflow属性にhiddenを指定します。表示する画像「900×600」に対して、
250×200を指定しているので、外側のdivタグのボックスを画像がはみ出してしまいます。
そのはみ出した部分を表示しないように設定しているのが、overflow:hiddenです。

そして、外側のdivタグのposition属性をrelativeに、imgタグのposition属性をabsoluteに指定します。
absoluteは外側のタグの左上を基準位置として設定し、内側のタグのコンテンツの表示位置をtopやleft属性を用いて
そこからの距離で指定できるようにするためのおまじないです。
absoluteを指定した外側のタグにはralatitveを設定する必要があります。

topとleftには、それぞれ、-100pxを指定しています。これにより、枠内には、画像の(100,100)の位置から
250×200の分のサイズの画像が表示されます。これで、画像のトリミングは完成です。

マウスでトリミング領域を移動させる


さて次に、切り取り領域をマウスで移動させることに挑戦します。
考え方は簡単です。上記のCSSで指定したleftとtopの値をマウスの移動に応じて、変更するだけです。

$(function () {
  var isMouseDown = false;
  var startX;
  var startY;
  
  $('#image').mousedown(function(e){
    isMouseDown = true;
	startX = e.pageX;
	startY = e.pageY;
	return false;
  });
  
  $('#image').mouseup(function(){
    isMouseDown = false;
	return false;
  }); 

  $('#image').mouseout(function(){
    isMouseDown = false;
	return false;
  });  
  
  $('#image').mousemove(function(e){
    if(isMouseDown) {
	  //移動量を計算する
	  var diffX = e.pageX - startX;
	  var diffY = e.pageY - startY;
	  
	  //移動後の座標
	  var left = parseInt($('#image').css('left').replace('px','')) + diffX;
	  var top = parseInt($('#image').css('top').replace('px','')) + diffY;
	  
	  /* 移動領域を枠内に制限する */
	  if($('#image').width() + left < $('#outer').width()) {
        left = $('#outer').width() - $('#image').width();
	  }
	  else if(left > 0) {
	    left = 0;
	  }	  
	  if($('#image').height() + top < $('#outer').height()) {
        top = $('#outer').height() - $('#image').height();
	  }
	  else if(top > 0) {
	    top = 0;
	  }
	  
	  $('#image').css('left',left + 'px');
	  $('#image').css('top',top + 'px');
    }
	//起点を現在のマウスの位置で更新する
	startX = e.pageX;
	startY = e.pageY;
	
	return false;
  });  
});

マウスのボタンが押されている時だけ、画像を移動させたいので、それを管理するための変数、isMouseDownを
定義し、mousedownイベントでそれをtrueにします。そして、ボタンが離された時にそのフラグをfalseにします。
マウスが画像の領域外にでた際にもfalseにします。

メインはmousemoveイベントの処理です。マウスが移動した変化量をleftとtopに反映させています。
起点となる位置を最初にマウスボタンが押された位置に設定し、その位置とマウスが移動した後のマウスの位置の
変化量を計算し、それを現在のtopとleftの値に加算します。

このままだと、画像が移動しすぎて、枠内に画像が残らないようになってしまいますので、
枠内にスペースが出来ない範囲で画像が移動するように、座標を補正します。

mousemoveイベントはマウスが動いている間、継続して発生しますので、
一度処理が終わったら、次の起点の位置として、現在のマウスの位置を設定します。

これでマウスで枠内に表示する画像の領域を移動させることが出来るようになりました。

スポンサーサイト
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。