當圖像大小改變時，JCrop不保存選擇

我第一次使用jcrop。和我有一個圖像大小和裁剪問題。當用戶上傳圖片1366x768或更大時，我在我的頁面上預覽它。我也有作物選擇預覽，它工作正常。當我提交職位時，它的作物很好（這是當我使用原始圖像大小）。
但我不想在頁面上顯示如此大的原始圖像。用戶必須看到原始圖像，預覽並在一個視圖中提交按鈕。所以我需要使圖像變小，如果圖像是1366x768我不想像683x368那樣顯示圖像。但這是問題。當我設置圖像標籤的寬度和高度作物不再正常工作。我貼我的問題，我的代碼和圖片預覽：當圖像大小改變時，JCrop不保存選擇

jQuery(window).load(function() { 

      jQuery('#cropbox').Jcrop({ 
       onChange: showPreview, 
       onSelect: showPreview, 
       setSelect: [0, 0, 540, 300], 
       allowResize: true, 
       aspectRatio: 2 
      }); 

     }); 

     function showPreview(coords) { 
      if (parseInt(coords.w) > 0) { 
       var rx = 540/coords.w; 
       var ry = 300/coords.h; 

       jQuery('#preview').css({ 
        width: Math.round(rx * 683) + 'px', 
        height: Math.round(ry * 368) + 'px', 
        marginLeft: '-' + Math.round(rx * coords.x) + 'px', 
        marginTop: '-' + Math.round(ry * coords.y) + 'px' 
       }); 
      } 

      $('#x').val(coords.x); 
      $('#y').val(coords.y); 
      $('#w').val(coords.w); 
      $('#h').val(coords.h); 
     } 

     </script> 
</head> 
<body> 
    <div>   
     <p style="width: 540px; height: 300px; overflow: hidden; float:left;"> 
      <img id="preview" src="../../Content/Images/Full/Leopard.jpg" /> 
     </p> 
     <p style="float:left;"> 
      <img id="cropbox" width="683px" height="368px" src="../../Content/Images/Full/Leopard.jpg" /> 
     </p> 

     <p> 
      @using (@Html.BeginForm("PostPicture", "Home")) 
      { 
       <input type="hidden" id="x" name="x" /> 
       <input type="hidden" id="y" name="y" /> 
       <input type="hidden" id="w" name="w" /> 
       <input type="hidden" id="h" name="h" /> 
       <button type="submit"> 
        Send</button> 
      } 
     </p>

enter image description here

這是第二個錯誤：我乘以2 enter image description here

X和Y在這之後是asp.net後端代碼：

public ImageResult PostPicture(int x, int y, int h, int w) 
     {    
      x = x * 2; 
      y = y * 2; 

      Image image = Image.FromFile(Path.Combine(this.Request.PhysicalApplicationPath, "Content\\Images\\Full\\Leopard.jpg")); 
      Bitmap cropedImage = new Bitmap(w, h, image.PixelFormat); 
      Graphics g = Graphics.FromImage(cropedImage); 

      Rectangle rec = new Rectangle(0, 0, 
           w, 
           h); 

      g.DrawImage(image, rec, x, y, w, h, GraphicsUnit.Pixel); 
      image.Dispose(); 
      g.Dispose(); 

      string savedFileName = Path.Combine(
        AppDomain.CurrentDomain.BaseDirectory, 
        "Content", "Images", "Full", 
        Path.GetFileName("cropped.jpg")); 

      cropedImage.Save(savedFileName); 

      return new ImageResult { Image = cropedImage, ImageFormat = ImageFormat.Jpeg }; 
     }

來源

2011-09-30 1110

也許嘗試設置在CSS樣式屬性的圖像尺寸：

<img id="cropbox" style="width:683px;height:368px" src="../../Content/Images/Full/Leopard.jpg" />

也許更好的解決方案是將服務器上的圖像調整爲所需的尺寸，然後將尺寸調整後的圖像顯示給用戶，而不是完整的原始圖像。這也將減少瀏覽器的下載時間，因爲圖像會更小。

來源

2011-09-30 20:09:41 Kekoa

我發現最好的解決方案是上傳後調整圖像大小。 – 1110

您必須調整傳遞的裁剪座標。您需要根據預先調整圖像大小的比例來調整它們。因此，如果您將圖像預覽縮小到原來的50％，則裁切的實際座標將是它們以（x * 2，y * 2）的兩倍。

來源

2011-09-30 20:11:57 malificent

對不起，我必須重新打開問題，我沒有在這裏看到另一個錯誤。在我修復X和Y之後，像你說的那樣，我得到了新的錯誤。我更新了第二個錯誤圖像的問題。這必須是關於寬度的東西。你能檢查一下嗎？ – 1110

當圖像大小改變時，JCrop不保存選擇

回答

相關問題