拖放將源設置爲透明圖像

我有一個圖像庫，可以將照片拖放到容器上。
然後，我在這些圖像上使用裁剪插件來允許用戶裁剪並調整圖像。作物在作物分區中完成，而容器中的圖像顯示作物的預覽。拖放將源設置爲透明圖像

我正在使用jQuery UI Draggable和droppable插件和美妙的imgAreaSelect裁剪和預覽。

我的問題是這樣的：當在容器中放置圖像時，插件將背景屬性設置爲源，並將源屬性設置爲透明的內嵌編碼圖像（如果有人會向我解釋邏輯在它後面）。
現在到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樣式，以使預覽在這裏使用，但提供的圖像作爲背景屬性。請參閱插件的demo。

來源

2011-05-17 Salmonela

你有沒有嘗試jQuery插件jQuery不同的jQuery作物？ – Val 2011-05-17 15:51:38

這兩個插件都有類似的回調函數。看到我的更新上面的問題澄清 – Salmonela 2011-05-17 22:25:07

如果我理解正確，這是發生了什麼：可插入的插件設置'div'（？）的背景圖像和裁剪插件獲取'img'元素有一個透明的圖像呢？ – 2011-05-18 04:47:53

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提供圖像

來源

2011-05-18 09:33:03 Val

詹姆斯，你是男人！ :)見下面我的答案詳情。 – Salmonela 2011-05-19 18:01:05

你是正確的詹姆斯。
我確實需要添加，雖然另一行：

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

背景位置和背景大小的伎倆。

順便說一句，img變量確實保存源，但這不是問題，我用data（）方法保存圖像的不同版本（不同大小）。

謝謝！

來源

2011-05-19 18:09:25 Salmonela

拖放將源設置爲透明圖像

回答

相關問題