javascript - 如何防止Croppie过度缩放(JavaScript图像裁剪插件)

我有一个非常基本的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正在为图像添加“缩放”样式，同时将图像放大了4倍。

scale(4.1667);

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


为了使其正常工作，我需要上传100倍x 100像素的4倍大小的图像，这太荒谬了。如果您需要更多信息，请告诉我。

谢谢！

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

最佳答案

我想我知道了。注释掉“绑定”调用后，它的行为符合我的预期。奇怪..

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

关于javascript - 如何防止Croppie过度缩放(JavaScript图像裁剪插件)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36585306/