アップロードした画像の範囲指定切り抜き

↓こことかで使われている指定範囲のみを保存する方法
マチウケメール便

js配布元
DEfusion.org.uk » JavaScript Image Cropper UI, using Prototype & script.aculo.us

注意するポイントとしては、DLされるサンプルだとscriptの参照がgoogleのサーバなのでファイルを自分のサーバに置くためPrototype、script.aculo.usは本家からDLしてくるとよいだろう。特にscript.aculo.usは他のモジュールjsもある為

例）正方形型の範囲指定

<link href="../../css/cropper.css" rel="stylesheet" type="text/css" media="screen,print">
<script src="../../js/prototype1.6.1.js" type="text/javascript"></script> 
<script src="../../js/scriptaculous-js-1.8.3/scriptaculous.js?load=effects,builder,dragdrop" type="text/javascript"></script>
<script src="../../js/cropper.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" charset="utf-8">
 function onEndCrop( coords, dimensions ) {
  $( 'x1' ).value = coords.x1;
  $( 'y1' ).value = coords.y1;
  $( 'x2' ).value = coords.x2;
  $( 'y2' ).value = coords.y2;
  $( 'width' ).value = dimensions.width;
  $( 'height' ).value = dimensions.height;
 }
 
 // example with a preview of crop results, must have minimumm dimensions
 Event.observe( 
  window, 
  'load', 
  function() { 
   new Cropper.ImgWithPreview( 
    'upImage',
    { 
     minWidth: 100, 
     minHeight: 100,
     ratioDim: { x: 100, y: 100 },
     displayOnInit: true, 
     onEndCrop: onEndCrop,
     previewWrap: 'previewArea'
    } 
   ) 
  } 
 );
</script>

でこれをPOSTしてphp側で保存処理をする

jQuery版もある
PHP & jQuery image upload and crop v1.2 | WebMotionUK