Cropper.js 以编程方式裁剪答案

【问题标题】：Cropper.js crop programmaticallyCropper.js 以编程方式裁剪
【发布时间】：2018-05-13 07:29:25
【问题描述】：

我正在使用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 是假的，所以我可能需要触发初始裁剪，但不知道如何。

【问题讨论】：

标签： cropper cropperjs

【解决方案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();
    }
});

【讨论】：