如何裁剪上传的一张图片

Question

我一直在查找Croppie库：https://foliotek.github.io/Croppie/

但如果我上传一张图片，我就无法意识到如何正确使用它(网页需要更多信息(。我如何将上传的图片设置在croppie内部？我尝试过捆绑或其他方式，但无法在里面展示。

我把我的代码留在这里(几乎和在官方页面上看到的一样(：

HTML

<div class="form-group">
<div id="image_user_profile" class="custom-input-file text-center">
<input id="fileInput" name="fileInput" type="file" size="1" class="input-file"/>
<img id="img_user" alt="Upload user image" src="{{ user.get_picture }}" width="50%" height="50%" style="background-color: #eee; min-height:100px"/>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div id="img-user-prueba2">
</div>
</div>
</div>

JS-

var uploadCrop = $('#img-user-prueba2').croppie({
enableExif: true,
viewport: {
width: 200,
height: 200,
},
boundary: {
width: 300,
height: 300
}
});

$('input[name=fileInput]').change(function(ev) {
RegisterTraveler.readURL(this);
});

Answer 1

这是模式：

import Croppie from 'croppie/croppie';
var croppie = new Croppie(<your element>, {boundary: etc...});
croppie.bind({url: <your image>});

Answer 2

我想你正在寻找这个

<script>
$('.demo').croppie({
url: 'demo/demo-1.jpg',
});
</script>