Overview DescriptionThis resource allows you to add a watermark on the images that you post in your topics.
The same resource can also be applied to other websites and to other parts of the forum
Watermark wrote:JQuery plugin Watermark help you seal batch of images, like a stamp tool.
Because this plugin is written in HTML5 and Javascript, so it will operate without a server for image processing, bandwidth limit is no longer the thing you need to worry.
Suitable uses for low-bandwidth web server, or web creation services, free forums without management server as Blogspot, Forumotion, ...
Demonstration
Technical limitations› This tutorial is also available to the forums powered by Forumotion free forum service
› It works with all Forumotion forums' versions
› This tutorial is adaptable for all communities and sites, even outside of Forumotion.
› The plugin requires jQuery to be installed. (On Forumotion forums it is by default)
Additional info- Does not work on older browsers that don't support HTML5.
- Cannot use images be limited server CORS headers according to the domain name. If this
- server in your rights management, you need to set up Apache as follows:
- Code:
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "referer, range, accept-encoding, x-requested-with"
Installation IntroductionThe resource relies on the script developed by Lelinhtinh, available on github at this page:
Watermark. Add watermark on images.
Javascript & jQueryFor the next step you need to go towards Administration Control Panel (ACP) Modules HTML & Javascript Javascript codes management and create a new code - upon verifying that Javascript codes management is enabled.
Then, to apply it on posts, you need to follow the same procedure, and add this code this time:
You need to reply to the topic in order to see the code resources
You can replace
value with the link of the image you will use as watermark.
In addition, you can remove
- Code:
:not([src*="/smiles/"]) |
if you want the watermark to appear even on smiles. Not recommended
Javascript CustomizationThere are some available options that you can integrate to customize the code.
| Name | Type | Default | Description | | path | String | 'watermark.png' | Path contains images used as a watermark, can use base64 image. | | text | String | '' | Text used as a watermark. | | textWidth | Number | 130 | Text width of frame surrounds, units: px. | | textSize | Number | 12 | Font size of text, units: px. | | textColor | String | 'white' | Text color, you can use HEX or RGBA color codes. | | textBg | String | 'rgba(0, 0, 0, 0.4)' | Background color, you can use HEX or RGBA color codes. | | gravity | String | 'se' | The position of the watermark on the image (nw, n, ne, w, e, sw, s, se, c). | | opacity | Number | 0.7 | The transparency of watermark, the value between 0 and 1. | | margin | Number | 10 | Distance from watermark to edge of image. | | outputWidth | Number | 'auto' | Image width after adding watermark, units: px or use 'auto'. | | outputHeight | Number | 'auto' | Image height after adding watermark, units: px or use 'auto'. | | outputType | String | 'jpeg' | Image format after adding watermark, You can use one of three types (jpeg, png, webp). | | done | Function | function(imgURL){this.src=imgURL;} | Called after image with watermark is created. | | fail | Function | function(){} | Called after an error of images is occurring. | | always | Function | function(){} | Called when processing finishes (done and fail). |
Note:
- If you use the
parameter,
parameter will be disabled. The watermark will be created from the text you type in text parameter.
- In the
parameter,
format only works on the Chrome browser. With other browsers, it will return the png format. Should avoid use png format, because image quality not much higher, but the output image size is quite large.
ExamplesHere are some examples you can use.
Choose output image sizeFor example, limit the maximum width is 500px.
You need to reply to the topic in order to see the code resources
You can also limit the height of image with
parameter. Should not use 2 size parameters simultaneously, because it can distort your image. Should only use a parameter, it will adjust the remaining parameter with image ratio.
Use text as watermarkYou need to reply to the topic in order to see the code resources
Notes| | Approved by | Niko | | | Approved on | February 3rd, 2023 | | | Tested on | Most recent browsers | | | Difficulty level | / | | | Source | FMCodes w// Watermark |
|
Home
