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

Posted 2023-02-25

【中文标题】Jquery图像裁剪问题 - 显示图像的另一部分而不是选定的

【英文标题】：Jquery image cropping problem - showing another part of image than selected

【发布时间】：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”的标记来诊断

【参考方案1】：

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

【讨论】：

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

【参考方案2】：

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