使用 Javascript 裁剪图像 (Croppie)

Question

将图像裁剪成 cicle

我曾尝试使用它们的函数来return base64 编码图像。它 return 一个 base64 代码但没有图像：这是我的代码：

<div id="vanilla-demo"></div>
 </div>
<img id="myImage" src="">

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="croppie.js"></script>

<script type="text/javascript">


        var vanilla = new Croppie(document.getElementById('vanilla-demo'), {
            viewport: { width: 200, height: 200 , type:'circle'},
            boundary: { width: 400, height: 400 },
            showZoom: false
        });
        vanilla.bind('dac.jpg');
            vanilla.result('canvas','original').then(function (src) {
                    console.log(src);
                    $('#myImage').attr('src', src);
            });

</script>

Answer 1

我是 Croppie 的创造者之一。快速浏览一下您的代码，我会说您的 croppie 尚未绑定。绑定方法 returns 一个您需要等待解决的 Promise。 Promise 等待图像加载以及所有初始化逻辑在 Croppie 上完成。

我会更改您的绑定和结果逻辑，改为执行以下操作：

vanilla.bind('dac.jpg').then(function() {
    vanilla.result('canvas','original').then(function (src) {
        console.log(src);
        $('#myImage').attr('src', src);
    });
});

使用 Javascript 裁剪图像 (Croppie)

Crop Image using Javascript (Croppie)

javascript

canvas

image

crop

croppie