1

Im using java script to crop full size image and make a thumbnail.Everything is okay but i want know how to upload cropped thumbnail after editing it? Is there anyway to upload it?

My code - When clicks on Edit thumbnail , we can crop the full size image and when cropping its visible in previewimage sector - after cropping full size image , we can click Apply Changes - when click that button java script function activates - On click

   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 !

            }

In that function i want to upload my created thumbnail..please help me!

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

1 Answer 1

0

The easier is to upload the crop coordinates and do the crop at server side.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.