Thay đổi hình ảnh trong khi sử dụng JCrop

Question

Tôi đang làm việc trên một tính năng mới trong trang web của mình và tôi bị mắc kẹt thực sự xấu. Im sử dụng JCrop rõ ràng là để cắt một hình ảnh trên trang web của tôi.

Tính năng mới mà tôi đã được yêu cầu triển khai là cho phép người dùng thay đổi màu sắc của Hình ảnh đang được cắt.

Tôi hiện có 3 hình ảnh, Màu sắc, Màu xám và Nâu đỏ.

Tôi có thể thay đổi nguồn của thẻ hình ảnh bằng cách sử dụng javascript để hình ảnh được thay đổi mà không tải lại nhưng tôi không thể làm điều này khi JCrop đã được kích hoạt vì nó thay thế hình ảnh ban đầu cho hình mới.

Tôi nghĩ tôi có thể tắt JCrop, Thay thế hình ảnh và sau đó bật lại, nhưng tôi không thể làm điều đó.

Ví dụ tôi tìm thấy nơi JCrop bị phá hủy (example5 trong Demo zip) sử dụng một đối tượng:

jcrop_api = $ .Jcrop ('# cropbox');

Nhưng tôi cho phép JCrop một cách khác nhau, giống như Ví dụ 3:

  jQuery('#cropbox').Jcrop({ 
       onChange: showPreview, 
       onSelect: showPreview, 
       aspectRatio: 1 
      }); 

Làm thế nào tôi có thể phá hủy JCrop vì vậy tôi có thể thay thế te hình ảnh? Có một cách khác để làm điều này?

Tôi có thể dễ dàng tải lại trang mỗi khi người dùng thay đổi màu sắc của hình ảnh nhưng tất cả chúng ta đều biết điều đó không hay.

Answer 1

Câu hỏi đầu tiên là nếu hình ảnh bạn đang hoán đổi có cùng kích thước không? Nếu họ đang có, những điều sau đây nên làm việc:

$(document).ready(function(){ 
    // Just pulled some creative commons images off flickr for testing. 
    var one = "http://farm5.static.flickr.com/4034/4580633003_e62e061b64_d.jpg"; 
    var two = "http://farm5.static.flickr.com/4060/4580650483_7881505c66_d.jpg"; 
    var three = "http://farm5.static.flickr.com/4034/4581278976_0c91bc0f6f_d.jpg"; 

    var api; 

    function showPreview(){ alert('Changed'); } 

    function setCrop() 
    { 
     api = $.Jcrop('#cropBox',{ aspectRatio: 1, onSelect: showPreview }); 
    } 

    // Setup Jcrop for the original image 
    setCrop(); 

    // Change the image and reset Jcrop 
    $('#button').click(function(){ 
     api.destroy(); 
     var i = $('#cropBox').get(0).src = three; 
     setCrop(); 
    });  

}); 

Nếu hình ảnh của bạn là kích cỡ khác nhau mọi thứ phức tạp hơn một chút (trao đổi một bức chân dung cho cảnh quan?). Bạn sẽ cần phải chờ đợi cho hình ảnh để tải để Jcrop có thể có được kích thước chính xác của hình ảnh mới. Hàm vanTime javascript setTimeout sẽ hoạt động, nhưng vì nó chạy trong phạm vi toàn cục, bạn cần định nghĩa một vài thứ một cách toàn cục. Nhược điểm là bạn phải chờ một hoặc hai giây trước khi bạn có thể cắt.

$(document).ready(function(){ 

    var one = "http://farm5.static.flickr.com/4034/4580633003_e62e061b64_d.jpg"; 
    var two = "http://farm5.static.flickr.com/4060/4580650483_7881505c66_d.jpg"; 
    var three = "http://farm5.static.flickr.com/4034/4581278976_0c91bc0f6f_d.jpg"; 

    // api needs to be defined globally so it can be accessed from the setTimeout function 
    $.globalEval("var api;"); 

    // Also need to define your showPreview globally. 
    $.globalEval("function showPreview(){ alert('Changed'); }"); 

    function setCrop() 
    { 
     // Need to pause a second or two to allow the image to load, otherwise the Jcrop plugin 
     // will not update the image size correctly and if you change image size the picture 
     // will be stretched. 
     // Change the 1000 to however many seconds you need to load the new image. 
     setTimeout("api = $.Jcrop('#cropBox',{ aspectRatio: 1, onSelect: showPreview  });",1000); 
    } 

    // Setup Jcrop for the original image 
    setCrop(); 

    // Change the image and reset Jcrop 
    $('#button').click(function(){ 
     api.destroy(); 
     var i = $('#cropBox').get(0).src = two; 
     setCrop(); 
    });  

}); 

Điều đó sẽ giúp bạn. Tất cả mọi thứ được thử nghiệm cho tôi trên FireFox qua tại jsFiddle. Bạn có thể thử nó ra here.

Answer 2

Câu hỏi hay! Các thông tin sau có thể tiết kiệm thời gian của chúng tôi,

function initJcrop(id) { 

    jcrop_api = $.Jcrop('#'+id, { 

    onSelect: showCoords, 
    onChange: showCoords, 
    bgColor: 'black', 
    bgOpacity: .4, 
    boxWidth: picture_width, 
    boxHeight: picture_height, 
    setSelect: [ (picture_width * 4/5), 
        (picture_height * 4/5), 
        (picture_width/5), 
        (picture_height/5) ] 
    }); 
} 

function stopJcrop() { 
    jcrop_api.destroy(); 
    return (false); 
} 

/* Example in use */ 

$('#start_button').bind('click', function() { 
    $('#image_file').attr('src', server_file); 
    initJcrop('raw_file'); 
}); 

$('#end_button').bind('click', function() { 
    stopJcrop(); 
}); 

Answer 3

Tôi đã gặp phải tình huống này. Tôi đã đặt jcropimage của tôi (#cropbox) trên một div và chỉ cần trống html của div. Xem mã bên dưới

javascript:

try { 
    $("#workspace").html(''); 
    } catch (Error) 
    { } 

//add cropbox on the fly 
$("#workspace").prepend(//create img tag with id "cropbox" here... i can't seem to post my code - Stack Overflow mechanism); 
$('#cropbox').attr("src", 'path/to/image'); 
$('#cropbox').Jcrop(); 

Hope this helps.

Answer 4

phiên bản mới nhất có chức năng setImage

http://deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js

var jcrop_api; 
$().ready(function() { 
      initJcrop(); 
      function initJcrop() 
      { 
       jcrop_api = $.Jcrop('#cropbox'); 
      }; 
}); 

Sau đó gọi

jcrop_api.setImage('server/uploads/image.jpg'); 

Theres một ví dụ ở đây

http://deepliquid.com/projects/Jcrop/demos/tutorial5.html

Answer 5

Tôi cũng gặp phải vấn đề này. Nếu tôi thêm và xóa hình ảnh cropbox thì mọi thứ sẽ hoạt động tốt.

............ 
$("#wrapper").on('click', '.img-crop-trigger',function(e){ 
    //clear the wrapper 
    $("#cropImageWrp").html(""); 
    // add the image cropbox 
    $("#cropImageWrp").append("<img src='' id='cropbox'>"); 
    //set the image source 
    $("#cropbox").attr("src", "/"+imageToCropUrl); 
............................... 

Answer 6

Giải pháp đơn giản nhất tôi đã tìm thấy:

$('.jcrop-holder img').attr('src', 'new image url'); 

Answer 7

Nếu bạn muốn thay đổi/hình ảnh tải lại với jcrop bạn phải sử dụng một hàm setImage():

//create var 
var jscrop_api; 

//set instance to our var 
$('#cropping-image').Jcrop({ 
     onChange: setCoords, 
     onSelect: setCoords 
}, function() { jcrop_api = this; }); 

//change image for instance 
jcrop_api.setImage("newPhoto.png");