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

Question

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

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

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

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

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

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

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

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

Но я включаю JCrop другим способом, больше как Пример 3:

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

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

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

27

jquery

задан bkaid 15 August 2011 в 21:57

2 ответа

Другие вопросы по тегам:

jquery

Похожие вопросы:

score 11 · Answer 1

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

$(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 мог получить правильный размер нового изображения. Функция setTimeout в обычном javascript будет работать, но поскольку она работает в глобальной области видимости, вам необходимо определить несколько вещей глобально. Обратной стороной является то, что вам нужно подождать секунду или две, прежде чем вы сможете обрезать.

$(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. Вы можете попробовать здесь .

score 3 · Answer 2

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

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