Fill Image With Diagonal Text Watermark – sfz

Preview:

Description:

sfz is a JavaScript-driven online watermark tool that enables you to fill images with diagonal text watermark.

Completely based on the browser’s local API, without any network requests.

How to use 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="cssscript.com" 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 in the document. That’s it.

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