javascript - 如何裁剪上传的一张图片

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

我想你正在寻找这个

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

Answer 2

这是模式：

import Croppie from 'croppie/croppie';

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