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

Question

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

Answer 1

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

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

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