2011-09-30 4 views
0

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

답변

1

어쩌면 CSS 스타일 속성에서 이미지 크기를 설정하십시오 :

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

더 좋은 해결책은 원하는 크기로 서버의 이미지 크기를 조정 한 다음 전체 원본 이미지 대신 사용자에게 크기 조정 된 이미지를 표시하는 것입니다. 또한 이미지가 더 작아지기 때문에 브라우저의 다운로드 시간도 단축됩니다.

+0

업로드 한 후 이미지의 크기를 조정하는 것이 가장 좋은 해결책입니다. – 1110

1

전달 된 자르기 좌표를 조정해야합니다. 미리보기를 위해 이미지의 크기를 조정 한 비율에 따라 조정해야합니다. 따라서 이미지 미리보기를 원래 크기의 50 %로 축소하면 자르기의 실제 좌표는 또는 (x * 2, y * 2)로 오는 것의 두 배가됩니다.

+0

죄송합니다 다시 질문을해야합니다 여기에 다른 오류가 표시되지 않았습니다. 내가 X와 Y를 고친 후에 너는 새로운 오류가 있다고 말했다. 두 번째 오류 이미지로 질문을 업데이트했습니다. 이것은 폭에 관한 것이어야합니다. 확인해 주시겠습니까? – 1110

관련 문제