Question

$(document).ready(function(){    
$image_crop = $('#upload-image').croppie({
    enableExif: true,
    viewport: {
        width: 300,
        height: 250,
        type: 'square'
    },
    boundary: {
        width: 350,
        height: 300
    }
});

我想以百分比给出宽度和高度。在上面的代码宽度和高度px。

Answer 1

不确定此刻是否可能

以下是已打开问题的链接：https://github.com/Foliotek/Croppie/issues/280

尽管如此，您可以尝试设置这样的值

viewport: {
  width: 80 + '%',
  height 80 + '%'
}

Answer 2

您无法直接以百分比形式提供height和width。检查了源并发现以相应方式附加的参数：

（https://github.com/Foliotek/Croppie/blob/188585563069754b60385e590e8767cb9b394302/croppie.js:369）

 css(viewport, {
        width: self.options.viewport.width + 'px',
        height: self.options.viewport.height + 'px'
    });

但您可以预先将百分比转换为绝对值，然后将其传递

    $(document).ready(function() {
        function cropImage(widthPercentage, heightPercentage) {
            var absWidth = (widthPercentage * $('#upload-image').width()) * 100;
            var absHeight = (heightPercentage * $('#upload-image').height()) * 100;
            $image_crop = $('#upload-image').croppie({
                enableExif: true,
                viewport: {
                    width: absWidth,
                    height: absHeight,
                    type: 'square'
                },
                boundary: {
                    width: 350,
                    height: 300
                }
            });
        }
    });

如何在此代码中修复宽度和高度％

2 个答案: