如何在裁剪后上传图像？

即时通讯使用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

如何在裁剪后上传图像？

回答

相关问题