angular - 使用 ngx-image-cropper 在单个图像上使用多个裁剪框

Question

我正在使用 angular 来完成图像裁剪任务。图像有多个面，需要在单击鼠标时进行选择。我们如何使用 npm 包为 Angular “ngx-image-cropper”或任何其他解决方案添加多个裁剪框？

Answer 1

我认为同时拥有多个裁剪框不是一个好主意。将源图像保持在屏幕上并尝试一张一张地裁剪。 ngx-image-cropper 的 imageCropped 事件为您提供所选区域的 base64 图像。用法示例:

onImageCropped(event: ImageCroppedEvent) {
    console.log(event.base64);
}

将保存按钮添加到页面并将选择存储在数组中。需要时使用它们。您还可以在 div 中显示它们并删除它们中的任何一个。