如何使用 Croppie（JavaScript 图像裁剪插件）防止过度缩放答案

【问题标题】：How to prevent over-zooming with Croppie (JavaScript image cropping plugin)如何使用 Croppie（JavaScript 图像裁剪插件）防止过度缩放
【发布时间】：2016-08-03 18:37:48
【问题描述】：

我有一个非常基本的 Croppie div 正在初始化，如下所示：

HTML：

<div id="upload-avatar" class="croppie-container"></div>

JavaScript：

$uploadCrop = $('#upload-avatar').croppie({
    viewport: {
        width: 100,
        height: 100,
        type: 'square' 
    },
    url: 'test_img.jpg'
});

$('#upload-avatar').croppie('bind');

'test_img.jpg' 成功加载到croppie-container 中，但是Croppie 正在为图像添加“缩放”样式，将图像放大4 倍。

scale(4.1667);

'test_img/jpg' 已经足够小（212px x 248px），可以在 100px x 100px 视口窗口内移动以进行裁剪，所以我不希望图像被放大。即使在复制代码示例之后在 Croppie 的网站上，我仍然有同样的问题。知道为什么 Croppie 会在我不想要的时候放大我的图像吗？（见图）

为了让它工作，我需要上传 4 倍于我想要放入 100 像素 x 100 像素框架的图像，这太荒谬了。如果您需要更多信息，请告诉我。

谢谢！

Croppie 文档：http://foliotek.github.io/Croppie/#documentation

【问题讨论】：

标签： javascript jquery web styles

【解决方案1】：

我想我明白了。在注释掉“绑定”调用后，它的行为与我预期的一样。奇怪..

$('#upload-avatar').croppie({
    viewport: {
         width: 100,
        height: 100,
        type: 'square' 
    },
    url: json.file
});
//$('#upload-avatar').croppie('bind');   //Commenting this line, fixed it!

【讨论】：