Question

我有一个图像库，我可以将照片拖放到容器中然后我在这些图像上使用裁剪插件，以允许用户裁剪和调整图像。裁剪在裁剪div中完成，而容器中的图像显示裁剪的预览。

我正在使用jQuery UI Draggable和droppable插件以及用于裁剪和预览的精彩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样式启用预览，但将图像作为背景属性提供。请参阅插件的demo。

Answer 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使用它来提供图像

Answer 2

你是对的詹姆斯我确实需要添加另一行：

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

背景位置和背景大小完成了这个技巧。

顺便说一句，img变量确实保存了源代码，但这不是问题，我用data（）方法保存了不同版本的图像（不同大小）。

谢谢！

拖放将源设置为透明图像

2 个答案: