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为false，所以可能我需要触发初始裁剪，但我不知道如何操作。

- o15a3d4l11s2

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();
    }
});

- o15a3d4l11s2