当图像大小改变时，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不保存选择

回答

相关问题