簡體   English   中英

裁剪后如何上傳圖片?

[英]How to upload image after cropping?

即時通訊使用Java腳本裁剪完整尺寸的圖像並制作縮略圖。一切都很好,但我想知道編輯后如何上傳裁剪的縮略圖嗎? 反正有上傳嗎?

我的代碼-單擊“編輯縮略圖”時,我們可以裁剪完整尺寸的圖像,並在預覽圖像部分中裁剪其可見的圖像時-裁剪完整尺寸的圖像之后,我們可以單擊“應用更改”-單擊該按鈕時,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>

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM