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

【问题标题】：Jquery image cropping problem - showing another part of image than selectedJquery图像裁剪问题 - 显示图像的另一部分而不是选定的
【发布时间】：2011-06-28 22:03:36
【问题描述】：

这个插件有问题

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，但效果相同

【问题讨论】：

我需要查看“#preview img”的标记来诊断

标签： javascript jquery jquery-plugins image-processing crop

【解决方案1】：

看起来您的缩放功能已关闭以供预览。您的编辑区域和预览看起来都是相同的大小（~100px），但是您的 JavaScript 设置为 300px 正方形的编辑区域和 100px 正方形的预览区域；这意味着您的预览会比应有的宽 3 倍，并且您最终会得到一个太大的预览，并且也会被剪裁。

【讨论】：

这就是问题所在。非常感谢你

【解决方案2】：

值“100”是宽度和高度的预览图像，值“300”是宽度和高度的主图像。

【讨论】：