图像标注工具 - 允许您在预览器中对图像进行标注

大家好,

我与队友 @vliboolean1010 很高兴向大家介绍新创建的 Discourse 主题组件——图像标注器(Image Annotator)。

每当您在编辑器中点击图像时,将激活以下功能:

  • 添加方框、形状、箭头和文本
  • 高亮或遮盖图像的某些部分
  • 选择并更改标注的颜色
  • 点击保存后,标注图像将自动更新
  • 支持包括 Safari、Firefox、Chrome 和 iOS Safari 在内的浏览器
  • (图像裁剪功能正在开发中)

安装界面

仓库: GitHub - discourse/discourse-image-annotator: image annotation theme component · GitHub

演示视频

46 个赞

干得漂亮!这已经测试过托管在 S3 上的图片了吗?启用 S3 时我遇到了跨域请求错误。

9 个赞

非常感谢,这太棒了。

7 个赞

你好 @davidkingham

感谢你详细报告此问题。在我们尝试解决该问题的同时,一个替代方案是从你的本地设备上传图片,而不是从在线来源上传。:slight_smile:

4 个赞

谢谢 Chun,但这不是一回事。我是从本地设备上传,但图片被上传到了 S3 端点,问题就出在这里。

8 个赞

我在想,这或许可以用来根据用户名自动为照片添加水印,但我不确定具体该怎么做。也许可以添加另一个按钮,用于打印 [用户名]@[网站域名]?

3 个赞

有没有可以在照片上涂鸦的功能

4 个赞

所以我的问题是这样:当我上传一张大图片(比如论坛教程的截图)时,系统会根据我的最大图片设置自动限制图片的显示。这带来了问题,因为如果图片较大,它会被缩放到极小,导致我无法编辑原始大图。

基本上,这导致该功能仅对小于“单图框”设置的图片有用;我们的设置例如为 400 x 400。

在这张图片中,展示的是同一组两张图片,其中一张使用了该组件进行了编辑。但该组件渲染后的结果已无法辨认。

如果您能将其设置为可编辑原始图片,而非单图框版本,那就太好了。

不过整体来说这是个很好的开端,我确实看到了它的实用价值!

4 个赞

帖子保存后,是否可以编辑注释?

3 个赞

看起来不是这样。编辑完成后,它会重新保存图像。

4 个赞

目前尚无此类功能。

4 个赞

写入图片错误

ftOaYJktEr

2 个赞

我已将其移至 #theme:broken-theme,并为其添加了 pr-welcome 标签。

我认为该主题需要大量完善和支持,才能成为一个合格的推荐主题组件。

6 个赞

我修复了一些图像标注的问题。
这是拉取请求的链接:

6 个赞

太棒了,谢谢 Nam。现在不会再报错了,而且能成功保存图片,这很棒。

在创作上面那幅杰作时,我注意到使用它时还有不少令人恼火的小问题。有好几次,注释初始化的位置不对。工具栏和编辑区域都向下偏移了半页。你觉得你能找出原因吗?

6 个赞

这是移除 Jquery 的 PR 链接:

7 个赞

我在想是否可以为该组件添加“裁剪”和“旋转”控件,这看起来会非常有用。

9 个赞

我会尽快查看!

6 个赞

完全不着急,非常高兴看到这个组件受到关注,它潜力巨大。

9 个赞

在与 @markvanlan 合作期间,我们意识到 markerjs 已发布新版本。
图片现在可以在弹窗中进行编辑,这将解决许多问题。
我正在着手编写一个拉取请求(PR)。

9 个赞