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

【问题标题】：Multiple cropper box on single image with ngx-image-cropper使用 ngx-image-cropper 在单个图像上的多个裁剪框
【发布时间】：2019-10-17 10:09:24
【问题描述】：

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

【问题讨论】：

你这样做了吗？我还需要在同一张图片上使用多个裁剪框？
@GhostDede 是的，我没有任何 npm 包就做到了。因为我得到了面部坐标列表，所以我在画布上渲染了图像并在坐标的帮助下在图像上绘制了正方形。困难的部分是在画布上缩放和管理图像。
你在 Github 上发布了你的项目吗？你是怎么做作物作业的？
我现在没有任何东西可以给你看。但是您可以尝试画布的 putImageData() 方法。查找以下链接以供参考 - developer.mozilla.org/en-US/docs/Web/API/…
@neekheel 你能用代码告诉我你的解决方案吗？我面临同样的问题..

【解决方案1】：

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

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

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

【讨论】：