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

更容易上传裁剪坐标并在服务器端进行裁剪。

裁剪后如何上传图片？

1 个答案: