所有上传图片的水印

各位 Discourse 开发者:

我想感谢所有 Discourse 开发者,你们出色的工作打造了世界上最好的论坛。:smiling_face_with_three_hearts: 就我个人而言,在过去 10 年中,我使用过 Discuz 和 Buddyboss(WordPress)等其他程序来搭建多个论坛,但没有一个能像 Discourse 这样出色。

Discourse 唯一缺失的功能是水印功能。如果 Discourse 支持在所有上传的图片上添加水印,那就完美了。这不需要像论坛中某些用户建议的那样极其复杂。(我理解开发者为何忽略他们的请求,因为那完全不切实际。)


依我之见,一个非常简单的功能就足够了。在每张上传的图片上添加一个图标或文本,只需让他人知道,当有人将您的图片分享(或窃取)到其他网站/平台时,该图片源自我的论坛。

就我个人而言,我总是在上传到论坛之前自己添加水印,但许多社区成员并不愿意这样做,尤其是当他们使用智能手机发布图片时,他们希望论坛能自动添加。

我理解 Discourse 最初是设计为更偏向文本的论坛,而不是像摄影论坛那样包含大量图片的论坛。但得益于许多优秀的插件/主题代码(TC),我可以用 Discourse 很好地构建一个面向摄影的论坛。


我建议在以下位置添加一个水印图片上传框:
/admin/site_settings/category/branding

并在以下位置添加一个选择按钮:
/admin/site_settings/category/files
2020-12-30_042258

以及一个用于选择水印位置的下拉菜单,类似于:

这样就已经足够了,不需要其他花哨的功能。
其他功能,如缩放、透明度、备份原始图片等,虽然很棒,但并非必要。

最后,我想再次感谢所有 Discourse 开发者的持续辛勤工作。
谢谢,新年快乐~!:kissing_heart:

7 个赞

谢谢 Jacky,听起来这是一个值得有人尝试的有趣插件。不过,我认为我们不会将其作为核心功能,但核心部分当然可以协助该插件的开发。

如果您有预算,我建议您在 Marketplace 中发布需求。我估计,一个最小化的原型插件(配置极简,仅需提供文本)大约需要 1 到 2 天即可完成开发。

而通过叠加图像添加水印的功能,可能需要稍长一些的时间才能完善。

12 个赞

经过一些尝试,我找到了一个临时的“解决方案”来处理水印问题。:partying_face:

以防万一其他人也有兴趣,我想分享一下我的变通方法。希望这能帮到大家。:smiling_face_with_three_hearts:

  1. 首先,我在另一个子域名上安装了 Chevereto(免费版)。
    (非常简单,只需将 installer.php 文件上传到服务器,打开页面并按照提示设置即可。几分钟就能完成。):kissing_heart:

  2. 免费版也支持水印功能,你可以在仪表盘的图像上传设置中进行配置。

你还可以在仪表盘中设置图像的最大宽度和高度,这样所有上传的大图都会自动调整大小。

  1. 将 Chevereto 插件(脚本)添加到 Discourse 的 <head> 标签中:
    <script async src="https://img.example.com/sdk/pup.js" data-url="https://img.example.com/upload"></script>

  2. Discourse 似乎不再支持带有 fa-icon 的 i 标签,因此我不得不修改 JavaScript 代码,将:
    <i class="fa fa-cloud-upload d-icon d-icon-upload"></i>
    改为:
    <svg class="fa d-icon d-icon-cloud-upload-alt svg-icon svg-node" aria-hidden="true"><use xlink:href="#cloud-upload-alt"></use></svg>

  3. 如果一切设置正确,Discourse 编辑器中将会显示一个云上传图标。

  4. 只需点击新图标,将图像拖放到弹出窗口中,它会自动上传并将带水印的代码粘贴到编辑器中。:partying_face:

  5. 目前在桌面端运行完美。但我仍在研究如何将图标添加到智能手机上。:thinking: 如果我找到方法,会更新这篇帖子。

这只是一个临时的变通方案,并不完美,但可以在几分钟内轻松实现。我仍然希望 Discourse 未来能在核心功能或通过插件/主题组件(TC)中直接添加水印支持。

9 个赞

这看起来不错。如果能有一个包含所有这些功能的主题组件,仅将 Chevereto 的安装作为手动步骤,那就太好了。

4 个赞

我对 Chevereto 插件的 JavaScript 进行了一些修改。


sibling: ".upload.btn", siblingPos:"before",
更改为
sibling:".code.btn",siblingPos:"after",

现在,图标在桌面端和智能手机上都能显示。:partying_face:

2 个赞

太棒了!它有实现相同目标的插件吗?

如果有一个用于此水印的组件会更好。

2 个赞

有人能告诉我图片保存在哪个文件夹吗?

我希望批量为它们添加水印的一种方法是运行外部图像编辑工具。

有人能够使用最新的 3.2 discourse 实现这一点吗?

这很酷。您可能还会对这个 Theme component 感兴趣

2 个赞

我在一个主题组件中试了一下。它只是一个概念验证,所以很基础。:smile:
每次上传都会自动应用水印。

从技术角度来看,就像 Discourse 在上传前预处理图像(例如压缩)一样,这个工具通过添加水印也做了同样的事情。得益于 API 和 Uppy 库,添加水印很容易实现。:pray:

如果您有任何想要考虑为最低要求的特性/自定义,请告诉我。:slight_smile:

编辑:一旦我实现了基本设置,就会发布一个版本。

14 个赞

:heart: :heart: :heart:
史诗般的工作!如果您需要任何测试人员,请告诉我。

2 个赞

嘿,这个可以上线生产环境了吗?我很有兴趣。

1 个赞

在什么情况下,在所有图片上打印水印既合适又合法?

1 个赞

这可以上线生产了吗?

抱歉,我来晚了。:sweat_smile:
如果您还有兴趣,我在这里发布了一个 TC:https://meta.discourse.org/t/watermark-image/347138。欢迎任何反馈!

7 个赞