【问题标题】:Croppie: image bigger than viewportCroppie:图像大于视口
【发布时间】:2016-04-28 23:04:28
【问题描述】:

我正在使用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);
            });

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

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

【问题讨论】:

    标签: javascript jquery image crop


    【解决方案1】:

    通过使用不同的插件解决:http://fengyuanchen.github.io/cropper/

    【讨论】:

    • 我也在寻找一个更容易理解的脚本。从问题 cmets 来看,croppie 似乎可以做到这一点,但文档和示例很差,而且开箱即用,它不是响应式脚本。
    【解决方案2】:

    这可能对你有帮助-

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-09-27
      • 2019-03-20
      • 1970-01-01
      • 2016-03-08
      • 2016-03-18
      • 1970-01-01
      • 1970-01-01
      • 2017-01-21
      相关资源
      最近更新 更多