Подтвердить что ты не робот

Изменение изображения при использовании JCrop

Я работаю над новой функцией на своем сайте, и я застрял очень плохо. Im используя JCrop, очевидно, чтобы обрезать изображение на моем веб-сайте.

Новая функция, которую меня попросили выполнить, - позволить пользователю изменять цвета обрезанного изображения.

У меня теперь 3 изображения: цвет, серая и сепия.

Я могу изменить источник тега изображения с помощью javascript, чтобы изображение менялось без перезагрузки, но я не могу сделать это, как только JCrop включен, потому что он заменяет исходное изображение для нового.

Я думал, что могу отключить JCrop, заменить изображение, а затем снова включить, но я не мог этого сделать.

В примере, который я нашел, где JCrop был уничтожен (пример5 в Demo zip), используется объект:

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

Но я разрешаю JCrop иначе, как в примере 3:

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

Как я могу уничтожить JCrop, чтобы заменить Te Image? Есть ли другой способ сделать это?

Я мог бы легко перезагружать страницу каждый раз, когда пользователь меняет цвет изображения, но мы все знаем, что это не круто.

4b9b3361

ОТВЕТЫ

Ответ 2

Я столкнулся с такой ситуацией. Я положил jcropimage (#cropbox) на div и просто опустошил html div. См. Код ниже

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 - Qaru mechanism);
$('#cropbox').attr("src", 'path/to/image');
$('#cropbox').Jcrop();

Надеюсь, что это поможет.

Ответ 3

Первый вопрос: если изображения, которые вы меняете, имеют одинаковый размер? Если да, то должно работать следующее:

$(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();
    });    

});

Если ваши изображения имеют разные размеры (свопинг портрета для пейзажа?), вещи немного сложнее. Вам нужно будет дождаться загрузки изображения, чтобы Jcrop мог получить правильный размер нового изображения. Функция javascript setTimeout будет работать, но поскольку она работает в глобальной области действия, вам нужно определить несколько вещей повсеместно. Недостатком является то, что вам нужно подождать секунду или два, прежде чем вы сможете обрезать.

$(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();
    });    

});

Это должно помочь вам. Все проверено для меня на FireFox в jsFiddle. Вы можете попробовать здесь.

Ответ 4

Хороший вопрос! Последователи могут сэкономить время,

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

Ответ 5

Если вы хотите изменить/перезагрузить изображение с помощью jcrop, вы должны использовать функцию 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");

Ответ 6

В итоге я тоже столкнулся с этой проблемой. Если я добавляю и удаляю изображение обрезки, все работает нормально.

............
$("#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);
...............................

Ответ 7

Самое простое решение, которое я нашел:

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