How to make use of it:

1. Build the HTML for the watermark tool.

<label for="image">1. Select An Image</label>
<input type="file" id="image" autocomplete="off">

<label for="text">2. Watermark Text</label>
<input type="text" id="text" placeholder=" " autocomplete="off" maxlength="30">

<label for="color">Text Color</label>
<input type="color" id="color" pattern="#[0-9A-Fa-f]{6}" autocomplete="off" value="#0000FF">

<label for="alpha">Opacity</label>
<input type="range" id="alpha" min="0" max="1" step="0.05" autocomplete="off" value="0.15">

<label for="space">Gap</label>
<input type="range" id="space" min="1" max="8" step="0.2" autocomplete="off" value="4">

<label for="size">Font Size</label>
<input type="range" id="size" min="0.5" max="3" step="0.05" autocomplete="off" value="1">

<label for="text">3. Click the Image To Download</label>
<p id="graph"></p>

2. Load the required JavaScript within the doc.

<script src="./build/script.js"></script>

Fill Image With Diagonal Text Watermark Plugin/Github, convert image to watermark online free

See Demo And Download