Cropper.js 以编程方式裁剪

Question

我正在使用cropper.js（https://github.com/fengyuanchen/cropperjs）来操作图像，但我找不到以编程方式裁剪图像的方法。

我想做的是在初始化裁剪器后立即创建裁剪预览。

var cropper = new Cropper(document.getElementById('img'), {
    autoCrop: true,
    autoCropArea: 1,
    aspectRatio: 500 / 660,
    minCropBoxWidth: 500,
    minCropBoxHeight: 660,
    viewMode: 2
});

我已autoCrop启用，但如果我尝试获取数据，cropper.getCroppedCanvas()它会返回null.

我注意到这cropper.cropped是错误的，所以我可能需要触发初始裁剪，但不知道如何触发。

Answer 1

我意识到我太早尝试生成预览图像了。问题是cropper尚未完全初始化。

触发时调用逻辑ready修复了它：

var cropper = new Cropper(document.getElementById('img'), {
    autoCrop: true,
    autoCropArea: 1,
    aspectRatio: 500 / 660,
    minCropBoxWidth: 500,
    minCropBoxHeight: 660,
    viewMode: 2,
    ready: function() {
        generatePreview();
    }
});