Question

我使用https://github.com/Foliotek/Croppie裁剪图片：

var basic = $('#demo-basic').croppie({
            viewport: {
                width: 640,
                height: 640
            },
            boundary: {
                width: 640,
                height: 640
            },
            showZoom: false
        });

        basic.croppie('bind', {
            url: 'image.jpg'
        });

我需要的结果图像尺寸为640 * 640而我只使用大于640 * 640的图像，如果我将结果设置为

，这种方法非常有效

 basic.croppie('result', {
                type: 'canvas',
                size: 'viewport'
            }).then(function (src) {
                window.open(src);
            });

我如何在移动屏幕上解决此问题（屏幕宽度为320px）？生成的图像仍然必须是640 * 640，并且必须是用户在裁剪（预览）时实际看到的图像。我尝试更改viewport或boundary参数，但结果图像与用户在裁剪（预览）时看到的图像不同。

TLDR：如何裁剪原始图像和裁剪图像都大于屏幕宽度的图像？

Answer 1

这可能对您有帮助 -

basic.croppie('result', {
            type: 'canvas',
            size: { width: 640, height: 640 }
        }).then(function (src) {
            window.open(src);
        });

Answer 2

使用其他插件解决：http://fengyuanchen.github.io/cropper/

Croppie：比视口大的图像

2 个答案: