具有ngx图像裁剪器的单个图像上的多个裁剪框

Question

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

Answer 1

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

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

向页面添加一个保存按钮，并将所选内容存储在数组中。无论何时需要，都可以使用它们。您还可以在div中显示它们并删除它们中的任何一个。