トリミング後の画像のアップロード方法は？

Question

私はフルサイズの画像を切り抜いてサムネイルを作成するためにJavaスクリプトを使用しています。すべては大丈夫ですが、編集後に切り取ったサムネイルをアップロードする方法を知りたいですか？とにかくそれをアップロードするには？

私のコード - 編集サムネイルをクリックすると、我々はフルサイズの画像を切り抜くことができますし、previewimage分野での表示をトリミングする場合 - フルサイズの画像をトリミングした後、我々は変更の適用をクリックすることができます - そのボタンのJavaスクリプトをクリックしたとき機能が有効になります - クリック時

var lassoEnd = function() { 
       $('thumbnail-controller').innerHTML = "<div><img class='loading_icon' src='public/loading.gif'/>Loading...</div>"; 
       lassoCrop.destroy(); 

      I WANT TO UPLOAD MY CROPPED AND CREATED THUMBNAIL IMAGE HERE ! 

      } 

この機能では、作成したサムネイルをアップロードします。

<div id="preview-thumbnail" class="preview-thumbnail"> 
    <img src="<?php echo $thumb ?>" alt="" id="previewimage" class="thumb_icon item_photo_user thumb_icon" /> </div> 
    <div id="thumbnail-controller" class="thumbnail-controller"> 
    <a href="javascript:void(0);" onclick="lassoStart();">Edit Thumbnail</a> </div> 




<script type="text/javascript"> 
     var orginalThumbSrc; 
     var originalSize; 
     var loader = new Element('img',{ src:'public/loading.gif'}); 
     var lassoCrop; 

     var lassoSetCoords = function(coords) 
     { 
      var delta = (coords.w - 48)/coords.w; 

      $('coordinates').value = 
      coords.x + ':' + coords.y + ':' + coords.w + ':' + coords.h; 

      $('previewimage').setStyles({ 
      top : -(coords.y - (coords.y * delta)), 
      left : -(coords.x - (coords.x * delta)), 
      height : (originalSize.y - (originalSize.y * delta)), 
      width : (originalSize.x - (originalSize.x * delta)) 
      }); 
     } 

     var lassoStart = function() 
     { 
      if(!orginalThumbSrc) orginalThumbSrc = $('previewimage').src; 
      originalSize = $("lassoImg").getSize(); 

      lassoCrop = new Lasso.Crop('lassoImg', { 
     ratio : [1, 1], 
     preset : [10,10,58,58], 
     min : [48,48], 
     handleSize : 8, 
     opacity : .6, 
     color : '#7389AE', 
     border : '/public/photo/crop.gif', 
     onResize : lassoSetCoords, 
      bgimage : '' 
      }); 

      $('previewimage').src = $('lassoImg').src; 
      //$('preview-thumbnail').innerHTML = '<img id="previewimage" src="'+sourceImg+'"/>'; 
      $('thumbnail-controller').innerHTML = '<a hef="javascript:void(0);" onclick="lassoEnd();">Apply Changes</a> or <a href="javascript:void(0);" onclick="lassoCancel();">cancel</a>'; 
      $('coordinates').value = 10 + ':' + 10 + ':' + 58+ ':' + 58; 
     } 

     var lassoEnd = function() { 
      $('thumbnail-controller').innerHTML = "<div><img class='loading_icon' src='public/loading.gif'/>Loading...</div>"; 
      lassoCrop.destroy(); 

     I WANT TO UPLOAD MY CROPPED AND CREATED THUMBNAIL IMAGE HERE ! 

     } 


     </script> 

Answer 1

クロップ座標をアップロードしてサーバー側でトリミングする方が簡単です。