如何在裁剪後上傳圖像？

即時通訊使用Java腳本來裁剪全尺寸的圖像，並製作一個縮略圖。一切都很好，但我想知道如何上傳剪輯縮略圖後編輯它？無論如何上傳它？如何在裁剪後上傳圖像？

我的代碼 - 當編輯縮略圖點擊，我們可以裁剪全尺寸圖像和種植時，其可見previewimage部門 - 裁剪最大尺寸的圖像後，我們可以單擊Apply Changes - 單擊該按鈕的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 ! 

      }

在該功能我要上傳我的創建thumbnail..please幫幫我吧！

<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>

來源

2011-10-30 San Jay

更容易的是上傳作物座標並在服務器端進行裁剪。

來源

2012-06-21 18:33:10

如何在裁剪後上傳圖像？

回答

相關問題