Mã từ đầu một hình ảnh cropper VÀ resizer (cùng một lúc) trong jQuery/javascript?

Question

Chúng tôi đang viết mã một trình cắt hình ảnh Javascript (jQuery) khá đơn giản &. Về cơ bản, hiện tại, chỉ các tính năng cần thiết thực sự là cắt và đổi kích thước.

Tôi đã kiểm tra một số plugin jQuery như JCrop v.v. và có vẻ như không có plugin nào đang thực hiện cả hai mọi thứ cùng một lúc. Rất nhiều croppers HOẶC thay đổi kích thước, nhưng không phải là hai tính năng trên cùng một chế độ xem hình ảnh "tự nhiên" cùng một lúc. Bằng cách tự nhiên tôi có nghĩa là ví dụ như thế này (phía dưới bên phải) không phải là rất đẹp trực quan cho người dùng:

http://jsfiddle.net/opherv/74Jep/33/

Mặc dù tôi đoán đây sẽ là một cách tốt để đi đến có hai tính năng cùng lúc. Mặc dù bạn có thể xem ví dụ này chỉ phóng quá hiện và nó được trình độ như sử dụng "hacks xấu xí" bởi chính tác giả để làm như vậy:

function changeZoom(percent){ 
    var minWidth=viewport.width(); 
    var newWidth= (orgWidth-minWidth)*percent/100+minWidth; 
    var newHeight= newWidth/orgRatio; 
    var oldSize=[img.width(),img.height()]; 

    img.css({ width: newWidth+"px", height: newHeight+"px" }); 

    adjustDimensions(); 

    //ugly hack :(
    if (img.offset().left+img.width()>dragcontainer.offset().left+dragcontainer.width()){ 
     img.css({ left: dragcontainer.width()-img.width() +"px" }); 
    } 
    if (img.offset().top+img.height()>dragcontainer.offset().top+dragcontainer.height()){ 
     img.css({ top: dragcontainer.height()-img.height() +"px" }); 
    } 
} 

Chúng tôi đang thay vì tìm kiếm các khả năng để sử dụng một khung giống chim bồ câu/zone (như chúng ta thấy thường xuyên nhất trên web) + tùy chọn phóng/thu phóng trên hình ảnh (xử lý trên đường viền của hình ảnh chẳng hạn)

Vì chúng tôi chỉ cần hai tính năng mà chúng tôi nghĩ là mã này từ đầu hoặc gần như là chúng tôi không muốn thêm các tập tin javascript/plugins khác sẽ được overkill anyway được đóng gói với các tính năng khác, chúng tôi sẽ không cần (ít nhất là cho bây giờ).

Câu hỏi đặt ra là: đang có một khó khăn cụ thể tại cố gắng để mã hiển thị một hình ảnh tái khá lớn bởi xử lý đơn giản & croppable bởi một lựa chọn khung hình/zone (mà cũng sẽ được tái khá lớn trên riêng của mình và có thể kéo xung quanh để người dùng có thể tinh chỉnh phần nào của hình ảnh mà anh ấy muốn)?

Chúng ta có thể tách biệt hai tính năng tốt hơn không?

Cảm ơn rất nhiều sự giúp đỡ của bạn.

Answer 1

Đã thử plugin này ??

http://code.google.com/p/resize-crop/

Nó cả cây trồng và thay đổi kích thước