2010-12-26 28 views
6

Có ai biết cách sử dụng ASP.Net MVC 3 Html Helper WebImage mới để cắt một tệp được tải lên thành một hình vuông không. Tôi muốn có nó tập trung nếu có thể. Tôi đã đập đầu của tôi trong vài giờ qua cố gắng để tìm ra điều này ... bất kỳ trợ giúp được đánh giá cao!WebImage Crop To Square

Kịch bản này khá đơn giản, người dùng có thể tải lên hình ảnh, sau đó hình ảnh sẽ được thay đổi kích thước thành hình vuông để sử dụng sau dưới dạng hình thu nhỏ trong trang web.

+0

Có một số ví dụ hay tại đây - http://weblogs.asp.net/gunnarpeipman/archive/2010/10/15/asp-net-mvc-3-beta-simple-image-manipulations-using- webimage-helper.aspx –

+0

@Dan Atkinson - vâng, tôi đã xem các ví dụ đó nhưng vấn đề của tôi là cắt xén thành hình vuông (và cố gắng làm trung tâm). –

Trả lời

13

Điều này phù hợp với tôi, hy vọng tiết kiệm thời gian cho người khác ...!

private static void CropImage (HttpPostedFileBase sourceImage) { 
    var newImage = new WebImage(sourceImage.InputStream); 

    var width = newImage.Width; 
    var height = newImage.Height; 

    if (width > height) { 
    var leftRightCrop = (width - height)/2; 
    newImage.Crop(0, leftRightCrop, 0, leftRightCrop); 
    } 
    else if (height > width) { 
    var topBottomCrop = (height - width)/2; 
    newImage.Crop(topBottomCrop, 0, topBottomCrop, 0); 
    } 

    //do something with cropped image... 
    //newImage.GetBytes(); 
} 
3

Tôi đề nghị sử dụng Jquery image crop plugin. Bởi vì tôi nghĩ rằng không tốt để cắt hình vuông tự động bởi vì bạn có thể loại bỏ phần chính của hình ảnh, ví dụ nếu nó ảnh người dùng bạn có thể cắt đầu của mình.

Plugin hình ảnh cây trồng dễ sử dụng. Người dùng chỉ cần chọn là anh ấy muốn sử dụng làm bản xem trước. Ở phía máy chủ bạn recive tọa độ điểm bắt đầu và chiều rộng/chiều cao. Để thay đổi kích thước hình ảnh/cắt ở phía máy chủ, tôi sử dụng image magick. Có wrapper for image magick at .net. Cũng được chăm sóc với wrapper vì nó chỉ 32 bit. Tôi đã phát triển cho các nhu cầu của riêng tôi wrapper cho hình ảnh magick. Nhưng tôi tin rằng nó có thể được thực hiện dễ dàng với.

Nếu bạn vẫn nghĩ rằng autocropping là những gì bạn cần, tôi đề nghị cắt tối đa trung tâm squere của hình ảnh và hơn recize kích thước mà bạn muốn.

Hy vọng trợ giúp này.

P.S. Tôi không biết nhưng tôi cho rằng nhiệm vụ như vậy không thể được thực hiện bằng cách sử dụng mvc WebImage.

+0

+1 để đề cập đến Jcrop. http://code.google.com/p/jcrop/ –

+0

cảm ơn, tôi đã xem xét jcrop, nhưng tôi đang cố gắng làm điều này liền mạch nhất có thể. Tôi biết cắt xén có thể gây ra một số cắt xén ngoài ý muốn nhưng sẽ làm việc hầu hết thời gian nếu được căn giữa. –

3

đây là một chức năng nhỏ để cắt ảnh từ trung tâm nhưng vẫn giữ tỷ lệ mong muốn. Tôi sử dụng nó để cắt hình ảnh cho các phòng trưng bày và như vậy.

public static WebImage BestUsabilityCrop(WebImage image, decimal targetRatio) 
    { 
     decimal currentImageRatio = image.Width/(decimal) image.Height; 
     int difference; 

     //image is wider than targeted 
     if (currentImageRatio > targetRatio) 
     { 
      int targetWidth = Convert.ToInt32(Math.Floor(targetRatio * image.Height)); 
      difference = image.Width - targetWidth; 
      int left = Convert.ToInt32(Math.Floor(difference/(decimal) 2)); 
      int right = Convert.ToInt32(Math.Ceiling(difference/(decimal) 2)); 
      image.Crop(0, left, 0, right); 
     } 
     //image is higher than targeted 
     else if (currentImageRatio < targetRatio) 
     { 
      int targetHeight = Convert.ToInt32(Math.Floor(image.Width/targetRatio)); 
      difference = image.Height - targetHeight; 
      int top = Convert.ToInt32(Math.Floor(difference/(decimal) 2)); 
      int bottom = Convert.ToInt32(Math.Ceiling(difference/(decimal) 2)); 
      image.Crop(top, 0, bottom, 0); 
     } 
     return image; 
    } 
Các vấn đề liên quan