Thay đổi kích thước hình ảnh sử dụng Jcrop

Question

Tôi sử dụng Jquery Jcrop để cắt xén hình ảnh của mình. Bây giờ tôi đang thực hiện một thanh trượt để thay đổi kích thước hình ảnh. Tôi muốn cắt xén và thay đổi kích thước để vui vẻ trên cùng một trang.

tôi làm điều đó như thế này:

$(document).ready(function() { 


    var img = $('#cropbox')[0]; // Get my img elem 
    var orgwidth, orgheight; 
    $("<img/>") // Make in memory copy of image to avoid css issues 
     .attr("src", $(img).attr("src")) 
     .load(function() { 
      orgwidth = this.width; // Note: $(this).width() will not 
      orgheight = this.height; // work for in memory images. 
     }); 

    $('#cropbox').Jcrop({ 
     onSelect: updateCoords 
    }); 

    $("#imageslider").slider({ 
     value: 100, 
     max: 100, 
     min: 1, 
     slide: function(event, ui) { 
      //$('ul#grid li').css('font-size',ui.value+"px"); 
      resizeImage(orgwidth, orgheight); 
     } 
    }); 

}); 

Và chức năng resizeImage đơn giản của tôi:

function resizeImage(orgwidth, orgheight) { 
    var value = $('#imageslider').slider('option', 'value'); 
    var width = orgwidth * (value/100); 
    var height = orgheight * (value/100); 
    $('#cropbox').width(width); 
    $('#cropbox').height(height); 
    $('#tester').val("org: "+orgwidth+" now: "+width); 
} 

Vấn đề là, trong thời gian sớm tôi bật Jcrop tôi không thể thay đổi kích thước hình ảnh. Làm thế nào tôi có thể sử dụng cả hai chức năng này cùng một lúc?

Answer 1

Tôi đã phá hủy jCrop trong khi thay đổi kích thước và đặt lại sau khi thay đổi kích thước. Dù sao cũng cảm ơn bạn. Mã số:

 function resizeImage(orgwidth, orgheight) { 
     jcrop_api.destroy(); 

     var value = $('#imageslider').slider('option', 'value'); 
     var width = orgwidth * (value/100); 
     var height = orgheight * (value/100); 
     $('#cropbox').width(width); 
     $('#cropbox').height(height); 
     $('#rw').val(width); 
     $('#rh').val(height); 

     initJcrop(); 

    } 

Answer 2

Nếu những gì bạn muốn là việc thay đổi kích thước phải tỷ lệ thuận, tôi không nghĩ bạn cần thanh trượt (vì nó có vẻ không tương thích với jCrop). Bạn có thể sử dụng jCrop và trong sự kiện onChange, đảm bảo tỷ lệ (nghĩa là, triển khai chức năng resizeImage, được sửa đổi).
Đó là những gì tôi nghĩ.

Answer 3

Tôi đã thực hiện cùng một tác vụ: thay đổi kích thước hình ảnh bằng thanh trượt nơi áp dụng jCrop. Có một số yếu tố khác bạn phải thay đổi kích thước cũng jCrop tạo ra, không chỉ hình ảnh. Tôi đã kết thúc việc vá plugin jCrop và đây là bản vá cho jCrop-0.9.10 mới nhất.

Vá jCrop của bạn. Nếu bạn không biết làm thế nào để áp dụng các bản vá, chỉ cần đặt các chức năng resizeImage để dòng 1578 của jCrop (phiên bản unimified ofcourse):

--- /home/dr0bz/Desktop/jquery.Jcrop.js 
+++ /home/dr0bz/workspace/profile_tuning/js/lib/jquery.Jcrop.js 
@@ -1573,6 +1573,15 @@ 
     ui: { 
     holder: $div, 
     selection: $sel 
+  }, 
+  
+  resizeImage: function(width, height) { 
+  boundx = width; 
+  boundy = height; 
+  $([$img2, $img, $div, $trk]).each(function(index, element) 
+  { 
+   element.width(width).height(height); 
+  }); 
     } 
    }; 

Lấy API jCrop:

var jCropApi; 
$('#photo').Jcrop({}, function() 
{ 
    jCropApi = this; 
}); 

Calc tầm cao mới và chiều rộng. Nếu bạn đang làm việc đó với một thanh trượt, hãy thanh trượt nói trả lại chiều rộng mới của hình ảnh và bạn tính toán tầm cao mới với tỉ lệ của hình ảnh:

var aspectRatio = width/height; 
// newWidth returned by slider 
var newHeight = Math.round(width/aspectRatio); 
jCropApi.resizeImage(newWidth, newHeight); 

Có một số điểm khác để giữ một mắt trên. Sau mỗi lần thay đổi kích thước, bạn nên xem khu vực cắt vẫn nằm trong chế độ xem của hình ảnh. Nếu bạn cần tôi có thể đăng nguồn hoàn chỉnh như thế nào tôi đã thực hiện nó cho tôi: jCrop + jquery ui trượt để thay đổi kích thước hình ảnh.

Trân

Answer 4

gì bạn cũng có thể làm là tận dụng các chức năng setImage của Jcrop, khi những thay đổi thanh trượt, hãy gọi setImage với api Jcrop và thiết lập chiều rộng và chiều cao giá trị mới như thế này:

var jcrop_api; 

$('#cropbox').Jcrop({ 
    onSelect: updateCoords 
}, function() { 
    jcrop_api = this; 
}); 

$("#imageslider").slider({ 
    value: 100, 
    max: 100, 
    min: 1, 
    slide: function(event, ui) { 
     var value = $('#imageslider').slider('option', 'value'); 
     var width = orgwidth * (value/100); 
     var height = orgheight * (value/100); 
     jcrop_api.setImage($(img).attr("src"), function() { 
      this.setOptions({ 
       boxWidth: width, 
       boxHeight: height 
      }); 
     }); 
     $('#tester').val("org: "+orgwidth+" now: "+width); 
    } 
}); 

Những gì tôi không chắc chắn về kỹ thuật này là nếu nó là giải pháp tốt nhất bởi vì mỗi khi bạn gọi hàm setImage, jcrop tạo một đối tượng Hình ảnh mới.

Answer 5

Là một phần mở rộng cho Hermann Bier trả lời, tôi đã thêm hoạt ảnh jquery. việc resize trông cách tốt hơn khi nó hoạt hình :)

thực hiện trong Jcrop phiên bản: jquery.Jcrop.js v0.9.12

Xác định vị trí mã:

ui: { 
    holder: $div, 
    selection: $sel 
    } 

trong jquery.Jcrop.js xung quanh dòng 1573 và thay thế bằng:

ui: { 
    holder: $div, 
    selection: $sel 
    }, 
    resizeImage: function(width, height) { 
    animationsTid = 500; 
    boundx = width; 
    boundy = height; 

    $($img2).animate({ 
     width: width, 
     height: height, 
    }, { duration: animationsTid, queue: false }); 

    $($img).animate({ 
     width: width, 
     height: height, 
    }, { duration: animationsTid, queue: false }); 

    $($div).animate({ 
     width: width, 
     height: height, 
    }, { duration: animationsTid, queue: false }); 

    $($trk).animate({ 
     width: width, 
     height: height, 
    }, { duration: animationsTid, queue: false }); 

    /* 
    //Old way of resizing, but without animation 
    $([$img2, $img, $div, $trk]).each(function(index, element){ 
     element.width(width).height(height); 
    }); 
    */ 
    } 

Gọi hàm sẽ kích hoạt thay đổi kích thước. Hãy thoải mái để xóa các mã giữa/* */- Tôi chỉ giữ nó như một tài liệu tham khảo

Chúc mừng Mã hóa :)