如何在 UI 上实现图片裁剪功能

Question

我最近遇到了一个通过 imagemagick 库裁剪图像的用例。

我正在使用一种 hacky 方式来使用如下 convert 命令裁剪图像：

                     #left,top     #right,bottom
convert source.png -crop +1300+650 -crop -337-226 destination.png

所以基本上它从左侧、顶部、右侧和底部切割图像。如何在 UI 中构建此功能，这将帮助用户通过选择图像上的区域/框来实际裁剪图像并获得裁剪的图像作为回报。 （避免了知道他们想要切割的确切像素的麻烦）

Answer 1

最快的方法显然是使用可用的JS image croppers 之一并将其与您在前端使用的任何内容集成。

如果您愿意，当然可以自己构建整个 UI...如果有人要求我这样做，我可能会这样做：

• 使用canvas元素；
• 在那里加载上传的图片；
• 让用户在其上绘制一个矩形（参见here 示例），这将为您提供您需要知道的坐标；
• 使用所述坐标裁剪图像服务器端，并将其发送回浏览器。