# Watermark Image
**URL:** https://meta.discourse.org/t/watermark-image/347138
**Category:** Theme component
**Created:** [January 14, 2025, 9:13pm UTC](https://meta.discourse.org/t/watermark-image/347138 "2025-01-14T21:13:27Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [January 14, 2025, 9:13pm UTC](https://meta.discourse.org/t/watermark-image/347138/1 "2025-01-14T21:13:27Z")
| | | |
| --- | --- | --- |
| ℹ | **Summary** | Automatically adds watermarks to user-uploaded images |
| 🛠 | **Repository** | [GitHub - Arkshine/discourse-watermark-image · GitHub](https://github.com/Arkshine/discourse-watermark-image/) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
## Description
This theme component automatically adds watermarks to user-uploaded images. You can use either an image or a QR code as your watermark, with extensive customization options for position, appearance, and distribution patterns.
The component offers granular control through category and user group settings, allowing you to tailor the watermarking behavior to your community’s needs.
_Please review the [Important Notes](#p-1687231-important-notes-8) section before implementation._
## Features
- High-performance processing using [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly) and [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
- Comprehensive image format support (PNG, JPEG, BMP, ICO, TIFF, WEBP)
- Dynamic QR code watermark generation
- Flexible sizing options (relative or absolute)
- Versatile positioning system
- Advanced appearance customization (opacity, rotation, scale, margin, etc.)
- Multiple blending modes
- Pattern distribution options (single, grid, diagonal, random)
- Category and user group-specific settings
- Live preview in settings panel
   
## Settings
| Setting | Description |
| --- | --- |
| `image` | The image to use as watermark.
Supported formats: PNG, JPEG, BMP, ICO, TIFF, WEBP.
Default: `""` |
| `size_mode` | How the watermark size is calculated:
- `relative`: Size is relative to the target’s image width.
- `absolute`: Applied at its original size.
Default: `"relative"` |
| `relative_width` | The width of the watermark relative to the target image width (in %).
Only applies when the watermark size mode is set to `relative`.
Range: 1-100
Default: `10` |
| `absolute_scale` | Scale factor for original watermark size (only used in absolute mode). Min: 0.01
Default: `1` |
| `max_size` | Maximum size as percentage of image dimensions. Range: 1-100
Default: `50` |
| `position` | Position of the watermark: `top-left`, `top-center`, `top-right`, `center-left`, `center`, `center-right`, `bottom-left`, `bottom-center`, `bottom-right`
Default: `"bottom-right"` |
| `margin_x` | Horizontal margin from the edge (in % of the target image)
Default: `0` |
| `margin_y` | Vertical margin from the edge (in % of the target image)
Default: `0` |
| `opacity` | Watermark opacity. Range: 1-100
Default: `100` |
| `rotate` | Rotation angle.
Range: -360 to 360 degrees
Default: `0` |
| `blend_mode` | How the watermark blends with the image: `normal`, `overlay`, `over`, `atop`, `xor`, `plus`, `multiply`, `burn`, `difference`, `soft_light`, `screen`, `hard_light`, `dodge`, `exclusion`, `lighten`, `darken`.
Default: `"normal"` |
| `pattern` | Watermark repetition pattern: `single`, `grid`, `diagonal`, `random`
Default: `"single"` |
| `pattern_allow_partial` | Allow partial watermarks at image edges
Default: `true` |
| `pattern_max_count` | Maximum number of watermark repetitions (0 for infinite)
Default: `50` |
| `pattern_spacing` | Spacing between repeated watermarks (in % of the target image)
Default: `15` |
| `qrcode_enabled` | Enable QR code watermark
Default: `false` |
| `qrcode_text` | Text to encode in QR code. Supports placeholders: `{homepage}`, `{username}`, `{topic_url}`
Default: `""` |
| `qrcode_color` | QR code color (hex or CSS variable)
Default: `"var(--primary)"` |
| `qrcode_background_color` | QR code background color (hex or CSS variable)
Default: `"var(--secondary)"` |
| `qrcode_quiet_zone` | Width of white space border around QR code (0-10 modules)
Default: `2` |
| `qrcode_error_correction` | Error correction level: `Low` (~7%), `Medium` (~15%), `Quarter` (~25%), `High` (~30%)
More information about error correction levels can be found [here.](https://www.qrcode.com/en/about/error_correction.html)
Default: `"Medium"` |
| `categories` | Categories where watermark should be applied.
Default: `""` |
| `groups` | Groups the watermark should be applied to.
Default: `"0"` |
| `skip_small_images` | Skip watermarking if image is below `min_image_dimensions`.
Default: `false` |
| `min_image_dimensions` | Minimum dimensions required (width x height)
Default: `"200x200"` |
| `allow_non_supported_uploads` | Allow image uploads to continue even when format is not supported
Default: `false` |
| | |
## Watermark Types
### Image
The component supports multiple image formats: PNG, JPEG, BMP, ICO, TIFF, and WEBP.
See the FAQ section for important information about format support limitations.
### QR Code
Generate dynamic QR codes with customizable content using these variables:
- `{homepage}` - The URL of the homepage
- `{username}` - The username of the user
- `{topic_url}` - The URL of the topic
**Important:** When styling QR code watermarks, consider contrast and sizing. Poor contrast ratios or excessive styling can make QR codes unreadable. Always test your QR code watermarks with scanning apps.
## Real-Time Preview
The settings panel includes a real-time preview feature, allowing you to see how your watermark configuration affects a sample image instantly.
The preview window offers several interactive features:
- Resizable and movable preview window
- Option to load a random sample image
- Support for uploading your own test images from your device
On the desktop, it opens automatically. You can also open from the button at the bottom of the page:
> **More images**
>
> 
> 
> 
## ⚠ Important Notes
- **Original Images Are Not Preserved**
Watermarks are applied before server upload, and original images are not retained. Thoroughly test your watermark settings before deploying to production.
- If testing in the admin panel, be careful not to validate your settings immediately. I would recommend creating a group or a category to be safe.
## FAQ
**Why are image formats limited?**
_While Discourse converts all uploads to JPEG, this TC watermarking occurs pre-upload on the original format, using specific image processing libraries. While post-upload watermarking is possible, it would require multiple upload/download cycles and affect the composer experience. I’m still exploring improvements to this workflow._
**Why isn’t text watermarking supported?**
_Text watermarking would require extensive configuration options (font selection, styling, etc.) that would be difficult to implement effectively without a dedicated interface. Image watermarks provide more flexibility and can be created using existing design tools._
## Roadmap
Future development plans may include:
- Multiple watermark profiles \[1\]
- Original image preservation \[2\]
- Post-upload watermarking
## Credits
This theme component is powered by:
- [Photon](https://silvia-odwyer.github.io/photon/): A WebAssembly image processing library
- [QR Code Generator](https://www.nayuki.io/page/qr-code-generator-library): Modified [fork](https://github.com/Arkshine/qr-code-generator-wasm) with WebAssembly support.
* * *
1. The upload input is partially supported with the [Object settings type](https://meta.discourse.org/t/objects-type-for-theme-setting/305009) – it can’t be done in a TC at the moment.
2. May require plugin development.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [January 14, 2025, 9:18pm UTC](https://meta.discourse.org/t/watermark-image/347138/2 "2025-01-14T21:18:53Z")
This is the first version, and I expect missing features. I’m looking forward to any feedback! 👍
---
### Author:  [@ozkn](https://meta.discourse.org/u/ozkn)
#### Post date: [January 14, 2025, 9:44pm UTC](https://meta.discourse.org/t/watermark-image/347138/3 "2025-01-14T21:44:12Z")
Thanks for the component. Does this component process images? Does this component compress images to size better than the original.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [January 14, 2025, 10:01pm UTC](https://meta.discourse.org/t/watermark-image/347138/4 "2025-01-14T22:01:46Z")
The component doesn’t perform any modifications or compression apart from applying the watermark.
Discourse already preprocesses the image first (using [squoosh](https://squoosh.app/) library) → the watermark is applied → The image is uploaded to the server. That would be how it works.
---
### Author:  [@Monikas](https://meta.discourse.org/u/Monikas)
#### Post date: [January 16, 2025, 7:33am UTC](https://meta.discourse.org/t/watermark-image/347138/5 "2025-01-16T07:33:56Z")
The first time you open a post and edit it, you can’t put a watermark on it, you need to post it and then click edit post and upload a picture to put a watermark on it.
The theme used is [FKB Pro - Social theme - #375 by MihirR](https://meta.discourse.org/t/fkb-pro-social-theme/234323/375)
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [January 16, 2025, 1:05pm UTC](https://meta.discourse.org/t/watermark-image/347138/6 "2025-01-16T13:05:14Z")
You mean that if you open/edit an existing post for the first time and upload an image, there is no watermark. Is this correct? Can you reproduce it every time? Do you see any error in the browser’s console?
If I understand correctly, you expect an existing uploaded image (before this TC installation) to have a watermark when you edit the post (or have a way to watermark the image manually) . It doesn’t work this way. You need to upload the image to apply a watermark.
Having a button to watermark a selected image manually could be a feature. Would that work with you?
---
### Author:  [@Monikas](https://meta.discourse.org/u/Monikas)
#### Post date: [January 16, 2025, 10:40pm UTC](https://meta.discourse.org/t/watermark-image/347138/7 "2025-01-16T22:40:30Z")
It’s the images uploaded after creating a new post that don’t have a watermark It’s the images uploaded after going into the post after posting and clicking edit that have the watermark.
For the posting button I use [Compose Center - #13](https://meta.discourse.org/t/compose-center/323776/13)
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [January 16, 2025, 10:49pm UTC](https://meta.discourse.org/t/watermark-image/347138/8 "2025-01-16T22:49:09Z")
Can you make a quick video, please? That would be useful to see and understand what’s happening.
---
### Author:  [@Monikas](https://meta.discourse.org/u/Monikas)
#### Post date: [January 17, 2025, 3:14am UTC](https://meta.discourse.org/t/watermark-image/347138/9 "2025-01-17T03:14:15Z")
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [January 17, 2025, 1:36pm UTC](https://meta.discourse.org/t/watermark-image/347138/10 "2025-01-17T13:36:35Z")
Thanks for your patience! I’ve found the issue. It should be fixed now! 👍
---
### Author:  [@thaidb](https://meta.discourse.org/u/thaidb)
#### Post date: [January 20, 2025, 12:25am UTC](https://meta.discourse.org/t/watermark-image/347138/11 "2025-01-20T00:25:22Z")
I get this error when install this component
`Đã xảy ra lỗi: Error creating upload asset: worker_photon_wasm. Original filename Sorry, the file you are trying to upload is not authorized (authorized extensions: jpg, jpeg, png, woff, woff2, svg, eot, ttf, otf, gif, js, dwg).`
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [January 20, 2025, 12:55am UTC](https://meta.discourse.org/t/watermark-image/347138/12 "2025-01-20T00:55:16Z")
That’s odd. What is your Discourse version?
You can try to add `wasm` extension in the allowed lists, but it works fine in my local and two production installations without any changes. 🤔
---
### Author:  [@Monikas](https://meta.discourse.org/u/Monikas)
#### Post date: [January 22, 2025, 5:39am UTC](https://meta.discourse.org/t/watermark-image/347138/13 "2025-01-22T05:39:05Z")
I’m going to give you some feedback, I don’t know what’s going on, but it seems that Chinese users don’t have watermarks on their uploaded images.
But I’m using a newly created account with that no-trace mode turned on and it’s working, so I don’t know what the problem is.
Sometimes it works, sometimes it doesn’t.
Take down the images are .jpeg .png But just like the picture in the video I copy the picture and upload it and it’s watermarked so I don’t know what the problem is.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [January 22, 2025, 6:58pm UTC](https://meta.discourse.org/t/watermark-image/347138/14 "2025-01-22T18:58:06Z")
Thanks for the feedback!
For you, no matter how you try, it always works, right?
Can you ask some of your users to check the browser’s console if it happens and copy any error message they see to you? Also, whether they are using a mobile device (android, iphone, etc) - If they can explain what they did exactly to see if it can help, it would be welcome.
It doesn’t look like an issue with the image itself if you are able to watermark the image yourself later. What is left is either an error in the code like the previous issue, or an error in the watermarking process. Unfortunately, I can’t reproduce it no matter I do.
I will see to update the component later to make sure any errors are caught and displayed to the user.
---
### Author:  [@LaptechInfo](https://meta.discourse.org/u/LaptechInfo)
#### Post date: [February 14, 2025, 2:10am UTC](https://meta.discourse.org/t/watermark-image/347138/15 "2025-02-14T02:10:26Z")
Hi, thank you for making this component.
when I tried to upload watermark photo, this error comes, i tried JPEG, Webp also, but still no luck
**My Discourse forum is UpToDate**
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [February 14, 2025, 2:15am UTC](https://meta.discourse.org/t/watermark-image/347138/16 "2025-02-14T02:15:11Z")
Hi @LaptechInfo
That’s strange. At this point, the TC should do nothing. This is the standard upload setting.
Can you look at the browser’s console and see if you see any error messages?
Is it possible to provide an image that fails so I can test on my side as well?
---
### Author:  [@LaptechInfo](https://meta.discourse.org/u/LaptechInfo)
#### Post date: [February 14, 2025, 3:53am UTC](https://meta.discourse.org/t/watermark-image/347138/17 "2025-02-14T03:53:01Z")
Hi, I tried many images randomly, but none of them worked.
I am not a programmer, no knowledge in any computer languages.
try this image, I tired.
[laptechinfo webp.zip](https://meta.discourse.org/uploads/short-url/pT4RPebLkFkYy4jWS4wzeqe1EWh.zip) (558 Bytes)
[watermark.zip](https://meta.discourse.org/uploads/short-url/youXVQk6viAMWn07gdhCNDXbfkJ.zip) (257.7 KB)
@Arkshine
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [February 14, 2025, 4:05am UTC](https://meta.discourse.org/t/watermark-image/347138/18 "2025-02-14T04:05:48Z")
Thanks! Can you also show the content of your Console? The tab right after. I think it might help.
EDIT: I think I can reproduce it, let me see, and will get back to you soon!
---
### Author:  [@LaptechInfo](https://meta.discourse.org/u/LaptechInfo)
#### Post date: [February 14, 2025, 4:16am UTC](https://meta.discourse.org/t/watermark-image/347138/19 "2025-02-14T04:16:18Z")
Console tab
@Arkshine
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [February 14, 2025, 5:37am UTC](https://meta.discourse.org/t/watermark-image/347138/20 "2025-02-14T05:37:18Z")
@LaptechInfo Thanks! There is a bug in Discourse from a PR yesterday. I made a topic: [Can't upload image in settings](https://meta.discourse.org/t/cant-upload-image-in-settings/352213). 👍
[Next page](https://meta.discourse.org/t/watermark-image/347138.md?page=2)