jQuery用のいい画像範囲選択ライブラリが見つからなかったのでprototype.js用ライブラリを使う

javascriptで画像の範囲選択をしたかったのだけど、
jQuery用のinterface.jsの機能ではちょっと物足りなかったので、
prototype.js用のライブラリとして作られたImage Cropper UIライブラリを
使ってみる。

Image Cropper UIライブラリのダウンロードはこちらから
http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/

ついでにjQueryとprototype.jsを一緒に使う方法を学べて良かった。
http://d.hatena.ne.jp/uchiuchiyama/20070118/using_jquery_with_other_javascript_libraries

この例ではjQueryを使う理由はほとんどないけど、
他の画面で使いまくっているのでここだけprototype専用にはしたくなかった。

<link rel="stylesheet" type="text/css" href="/static/javascripts/cropper/cropper.css">
<script type="text/javascript" src="/static/javascripts/jquery-1.1.3.1.js"></script>
<script type="text/javascript" src="/static/javascripts/cropper/prototype.js"></script>
<script type="text/javascript" src="/static/javascripts/cropper/scriptaculous.js?load=builder,effects,dragdrop" language="javascript"></script>
<script type="text/javascript" src="/static/javascripts/cropper/cropper.js"></script>
<script type="text/javascript">
  <!--//
      jQuery.noConflict();
      var j$ = jQuery;
      j$(function() {
          new Cropper.Img("image", {
              onEndCrop: function(coords, dimensions) {
                  j$("#crop_x").val(coords.x1 + ":" + coords.y1);
                  j$("#crop_y").val(coords.x2 + ":" + coords.y2);
                  j$("#crop_width").val(dimensions.width);
                  j$("#crop_height").val(dimensions.height);
              }
          });
      });
      //-->
</script>
<center id="imageContainer">
<img id="image" src="{{ photo.get_image_url }}" />
</center>
<div>
<div>x:<input type="text" id="crop_x" /></div>
<div>y:<input type="text" id="crop_y" /></div>
<div>w:<input type="text" id="crop_width" /></div>
<div>h:<input type="text" id="crop_height" /></div>
</div>