拖放将源设置为透明图像

我有一个图像库，可以将照片拖放到容器上。
然后，我在这些图像上使用裁剪插件来允许用户裁剪并调整图像。作物在作物分区中完成，而容器中的图像显示作物的预览。拖放将源设置为透明图像

我正在使用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

拖放将源设置为透明图像

回答

相关问题