Croppie:图像大于视口

Nth*_*ree 4 javascript jquery image crop

我正在使用https://github.com/Foliotek/Cropie裁剪图像:

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

        basic.croppie('bind', {
            url: 'image.jpg'
        });
Run Code Online (Sandbox Code Playgroud)

我需要 640*640 的结果图像大小,并且我只使用大于 640*640 的图像,如果我将结果设置为

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

我如何在移动屏幕(屏幕宽度约为 320px)上解决此问题?生成的图像仍然必须是 640*640,并且必须是用户在裁剪(预览)时实际看到的图像。我尝试更改viewportboundary参数,但生成的图像与用户在裁剪(预览)时看到的图像不同。

TLDR:当原始图像和裁剪后的图像都大于屏幕宽度时,如何裁剪图像?

Chi*_*ain 5

这可能对你有帮助——

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