chz062009
(ChunHao Zheng)
1
大家好,
我与队友 @vliboolean1010 很高兴向大家介绍新创建的 Discourse 主题组件——图像标注器(Image Annotator)。
每当您在编辑器中点击图像时,将激活以下功能:
- 添加方框、形状、箭头和文本
- 高亮或遮盖图像的某些部分
- 选择并更改标注的颜色
- 点击保存后,标注图像将自动更新
- 支持包括 Safari、Firefox、Chrome 和 iOS Safari 在内的浏览器
- (图像裁剪功能正在开发中)
安装界面
仓库: GitHub - discourse/discourse-image-annotator: image annotation theme component · GitHub
演示视频
46 个赞
干得漂亮!这已经测试过托管在 S3 上的图片了吗?启用 S3 时我遇到了跨域请求错误。
9 个赞
chz062009
(ChunHao Zheng)
4
你好 @davidkingham,
感谢你详细报告此问题。在我们尝试解决该问题的同时,一个替代方案是从你的本地设备上传图片,而不是从在线来源上传。
4 个赞
谢谢 Chun,但这不是一回事。我是从本地设备上传,但图片被上传到了 S3 端点,问题就出在这里。
8 个赞
Zup
6
我在想,这或许可以用来根据用户名自动为照片添加水印,但我不确定具体该怎么做。也许可以添加另一个按钮,用于打印 [用户名]@[网站域名]?
3 个赞
所以我的问题是这样:当我上传一张大图片(比如论坛教程的截图)时,系统会根据我的最大图片设置自动限制图片的显示。这带来了问题,因为如果图片较大,它会被缩放到极小,导致我无法编辑原始大图。
基本上,这导致该功能仅对小于“单图框”设置的图片有用;我们的设置例如为 400 x 400。
在这张图片中,展示的是同一组两张图片,其中一张使用了该组件进行了编辑。但该组件渲染后的结果已无法辨认。
如果您能将其设置为可编辑原始图片,而非单图框版本,那就太好了。
不过整体来说这是个很好的开端,我确实看到了它的实用价值!
4 个赞
sam
(Sam Saffron)
13
我已将其移至 #theme:broken-theme,并为其添加了 pr-welcome 标签。
我认为该主题需要大量完善和支持,才能成为一个合格的推荐主题组件。
6 个赞
Nam
(Guhyoun Nam)
17
我修复了一些图像标注的问题。
这是拉取请求的链接:
6 个赞
太棒了,谢谢 Nam。现在不会再报错了,而且能成功保存图片,这很棒。
在创作上面那幅杰作时,我注意到使用它时还有不少令人恼火的小问题。有好几次,注释初始化的位置不对。工具栏和编辑区域都向下偏移了半页。你觉得你能找出原因吗?
6 个赞
sam
(Sam Saffron)
21
我在想是否可以为该组件添加“裁剪”和“旋转”控件,这看起来会非常有用。
9 个赞
sam
(Sam Saffron)
25
完全不着急,非常高兴看到这个组件受到关注,它潜力巨大。
9 个赞
Nam
(Guhyoun Nam)
26
在与 @markvanlan 合作期间,我们意识到 markerjs 已发布新版本。
图片现在可以在弹窗中进行编辑,这将解决许多问题。
我正在着手编写一个拉取请求(PR)。
9 个赞