javascript - Jquery 图像裁剪问题 - 显示图像的另一部分而不是选定的

Question

这个插件有问题

http://odyniec.net/projects/imgareaselect/

我认为这张图片说明了一切。

我已经选择了整个图像，但拇指只显示了其中的一部分。即使在更大的图像上，它也确实看起来很糟糕。我的代码

function preview(img, selection) {
    if (!selection.width || !selection.height)
        return;
    var scaleX = 100 / selection.width;
    var scaleY = 100 / selection.height;

    $('#preview img').css({                          
        width: Math.round(scaleX * 300),             
        height: Math.round(scaleY * 300),
        marginLeft: -Math.round(scaleX * selection.x1),
        marginTop: -Math.round(scaleY * selection.y1)
    });                                              

}

$(function () {
    $('#photo').imgAreaSelect({ aspectRatio: '1:1', handles: true,
        fadeSpeed: 200, onSelectChange: preview });
});

我试过 jcrop，但效果一样

Answer 1

看起来您的预览缩放比例已关闭。您的编辑区域和预览看起来大小相同(~100px)，但您的 JavaScript 设置了一个 300px 正方形的编辑区域和一个 100px 正方形的预览区域；这意味着您的预览会比应有的宽 3 倍，并且您最终会得到一个过大的预览，而且还被裁剪了。