Блог

Главная - Вопросы по программированию - перетаскивание устанавливает исходный код в прозрачное изображение

перетаскивание устанавливает исходный код в прозрачное изображение

#jquery #image #drag-and-drop #background #transparent

#jquery #изображение #перетаскивание #фон #прозрачный

Вопрос:

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

я использую плагины jQuery UI с возможностью перетаскивания и удаления, а также замечательный imgAreaSelect для обрезки и предварительного просмотра.

моя проблема заключается в следующем: при перемещении изображения в контейнер плагин устанавливает атрибут background в качестве источника, а атрибутом source является прозрачное встроенное закодированное изображение (хотелось бы, чтобы кто-нибудь объяснил мне логику, стоящую за этим).
теперь для логики предварительного просмотра плагина imgAreaSelect требуется, чтобы изображение было атрибутом источника. хотя я могу временно заменить атрибут источника и фона, это не идеальное решение.

у кого-нибудь есть идеи?

обновление:
проблема не в самих плагинах, функция обратного вызова для события onChange определяется следующим образом:

 function showPreview(coords)
{
    var rx = 100 / coords.w;
    var ry = 100 / coords.h;

    $('#preview').css({
        width: Math.round(rx * 500)   'px',
        height: Math.round(ry * 370)   'px',
        marginLeft: '-'   Math.round(rx * coords.x)   'px',
        marginTop: '-'   Math.round(ry * coords.y)   'px'
    });
};

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

Комментарии:

1. вы пробовали плагин jcrop для jquery с другой обработкой jquery?

2. оба плагина имеют аналогичную функцию обратного вызова. смотрите мое обновление выше для разъяснения вопроса

3. Если я правильно понимаю, это то, что происходит: удаляемый плагин устанавливает фоновое изображение div (?), а плагин обрезки получает img элемент с прозрачным изображением в нем?

4. хорошо, это то, что происходит, когда вы перетаскиваете изображение, создаются некоторые разделы с абсолютным положением, которые проходят над вашим исходным изображением, чтобы он мог вычислить координаты нового изображения, в то же время он также использует окно предварительного просмотра, где он копирует изображение, затем показывает только часть изображения, используя поля css и ширину. Вопрос в том, почему вам нужно использовать атрибут background, а не оставлять его как есть? также проверьте мой ответ, не уверен, что он будет работать deff, но может направить вас на правильный путь 🙂

Ответ №1:

 function preview(img, selection) {
    var scaleX = 100 / (selection.width || 1);
    var scaleY = 100 / (selection.height || 1);
    // console.log($(img).attr('src'));
    $('#preview   div').css({
        width: Math.round(scaleX * 400)   'px',
        height: Math.round(scaleY * 300)   'px',
        "background-image": 'img_src',
        "background-position": '-'   Math.round(scaleX * selection.x1)   'px '  '-'   Math.round(scaleY * selection.y1)   'px',
    });
}

$('#preview'); должен быть div,

var img , должен содержать ссылку на src, которую вам, возможно, придется захватить из него. используйте console.log комментарий выше, чтобы посмотреть, даст ли это вам src изображения, затем используйте его в img_src для предоставления изображения

Ответ №2:

вы правы, Джеймс.
Мне действительно нужно было добавить еще одну строку, хотя: 

 "background-size": Math.round(scaleX * 400)   'px '   Math.round(scaleY * 300)   'px'

положение фона и размер фона сделали свое дело.

кстати, переменная img действительно содержит исходный код, но проблема была не в этом, поскольку я сохранял разные версии изображения (разных размеров) с помощью метода data ().

Спасибо!