자르기 후 이미지를 업로드하는 방법은 무엇입니까?

전 자바 스크립트를 사용하여 전체 크기 이미지를 자르고 썸네일을 만듭니다. 모든 것이 괜찮지 만 편집 후 자른 미리보기 이미지를 업로드하는 방법을 알고 싶습니까? 어쨌든 업로드 할 수 있습니까?자르기 후 이미지를 업로드하는 방법은 무엇입니까?

내 코드 - previewimage에 부문의 볼을자를 때 편집 썸네일에 클릭, 우리는 전체 크기의 이미지를자를 수 있습니다 때 - 그 버튼 자바 스크립트를 클릭 할 때 - 전체 크기의 이미지를 자르기 후에, 우리는 변경 사항 적용을 클릭 할 수 있습니다 기능 활성화 - 클릭시

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>

출처

2011-10-30 San Jay

더 쉽게 자르기 좌표를 업로드하고 서버 측에서 자르기를 수행하는 것이 더 쉽습니다.

출처

2012-06-21 18:33:10

자르기 후 이미지를 업로드하는 방법은 무엇입니까?

답변

관련 문제