带有鼠标事件的 Angular 2/4 图像裁剪

Posted

技术标签:

【中文标题】带有鼠标事件的 Angular 2/4 图像裁剪【英文标题】:Angular 2/4 Image Cropping with mouse event 【发布时间】:2017-07-19 11:39:17 【问题描述】:

我是 angular2/4 的新手。我正在寻找可以使用鼠标事件裁剪图像的角度包。我搜索了很多,但可以找到任何东西。希望你们有一个。或者给我一些提示如何实现一个好的。

我发现了一些用于图像裁剪的软件包,但它们对我的情况并不是很有帮助。

谢谢

【问题讨论】:

【参考方案1】:

您需要在 purejs 上包含模块。加上为模块添加类型,你可以使用带有接口的模块。

我找了找

    https://github.com/fengyuanchen/cropperjs https://www.npmjs.com/package/@types/cropperjs

对于鼠标事件阅读这篇文章 - Angular2: mouse event handling (movement relative to current position)

更新:

你可以使用这个模块https://github.com/cstefanache/angular2-img-cropper

【讨论】:

【参考方案2】:

用于单张图片上传和裁剪https://www.npmjs.com/package/ngx-image-cropper 和多个 https://github.com/MMtechnolab/Angular-Typescript--2-8-Multiple-Image-Upload-and-Crop-.git 检查这个 演示:http://mmangimgcrop.gear.host/

我在 Angular 8 中也遇到了同样的问题,所以我对 ngx-image-cropper 进行了一些更改,它允许用户上传多个图像,如下图所示

像这张图片一样,它允许从本地系统中选择多个图片

并通过选择 Image Image Cropper 进行裁剪

【讨论】:

以上是关于带有鼠标事件的 Angular 2/4 图像裁剪的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Angular 2 / 4 中使用鼠标滚轮事件测试指令

Pygame 游戏开发 图形绘制 & 键鼠事件

Pygame 游戏开发 图形绘制 & 键鼠事件

如何使用 Python 图像库裁剪通过鼠标单击选择的区域?

我怎样才能结合这两个代码? (python图像查看器+鼠标拖动图像ROI裁剪)

裁剪的 SVG 多边形接收鼠标事件