jquery image watermark plug-in

Brief Tutorial

Img2Blob.js is a jquery plug-in that can add custom watermarks to images. This jquery image watermark plug-in can convert images into blob objects and then add custom watermark effects to them.

Usage method

Introduce jquery and img2blob.js files into the page.

<script src="path/to/jquery.min.js"></script>
<script src="path/to/img2blob.js"></script>

HTML structure

The default effect and the HTML structure of the watermark effect of the custom image watermark plug-in are as follows:

<h3>默认图片</h3>
<img class="sample1" data-img2blob="img/1.png" />
<img class="sample1" data-img2blob="img/2.jpg" />
 
<hr>
 
<h3>添加水印之后的图片</h3>
<img class="sample2" data-img2blob="img/1.png" />
<img class="sample2" data-img2blob="img/2.jpg" />

Initialize the plug-in

On the page After the DOM element is loaded, you can initialize the image watermark plug-in through the following method

$(function() {
 
    // default
    $(".sample1").img2blob();
     
    // with watermark
    $(".sample2").img2blob({
        watermark: '@bachors',
        fontStyle: 'Arial',
        fontSize: '30', // px
        fontColor: '#333', // default 'black'
        fontX: 50, // The x coordinate where to start painting the text
        fontY: 50 // The y coordinate where to start painting the text
    });
 
});

The github address of the Img2Blob.js image watermark plug-in is: https://github.com/bachors/Img2Blob.js

The above is the content of the jquery image watermark plug-in. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!