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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用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容器中,然而Croppie正在为图像添加“缩放”样式,手动将图像缩放4倍。

scale(4.1667);

'test_img / jpg'已足够小(212px x 248px),可在100px x 100px视口窗口中移动以进行裁剪,因此我不希望图像放大。即使在Croppie网站上复制代码示例后也是如此,我还有同样的问题。任何想法为什么Croppie在我不想要的时候放大我的图像? (见图)enter image description here

为了实现这一点,我需要上传我想要放在100px x 100px帧中的4X图像,这很荒谬。如果您需要更多信息,请告诉我。

谢谢!

Croppie docs: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!

以上是关于如何使用Croppie防止过度缩放(JavaScript图像裁剪插件)的主要内容,如果未能解决你的问题,请参考以下文章

html 使用croppie jquery-plugin。上传文件,它允许您在中心使用圆圈进行平移和缩放,然后当您单击“保存”时,将裁剪c

.NET 可用内存使用情况(如何防止过度分配/释放内存给操作系统)

如何使用croppie js到php使用裁剪图像并使用它?

K-Fold 如何防止模型中的过度拟合

像素比较过度缩放

如何添加 Croppie 结果以上传 php 并将结果传递到其他 php 页面