перетаскивание устанавливает источник прозрачного изображения - PullRequest
Новая
       11

перетаскивание устанавливает источник прозрачного изображения

1 голос
/ 17 мая 2011

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

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

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

идеи для кого-либо?

update :
сами плагиныне проблема, функция обратного вызова для события 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, используемые здесь, но с изображением, предоставленным в качестве атрибута фона.,см. демо плагина.

Ответы [ 2 ]

2 голосов
/ 18 мая 2011 
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, прокомментированный выше, чтобы увидеть, даст ли он источник изображения, затем используйте его на img_src, чтобы предоставить изображение

0 голосов
/ 19 мая 2011

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

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

background-position и background-size сделали свое дело.

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

спасибо!

...