Home >Web Front-end >JS Tutorial >jquery image watermark plug-in

jquery image watermark plug-in

黄舟
黄舟Original
2017-01-19 14:56:462362browse

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: &#39;@bachors&#39;,
        fontStyle: &#39;Arial&#39;,
        fontSize: &#39;30&#39;, // px
        fontColor: &#39;#333&#39;, // default &#39;black&#39;
        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 (www.php.cn)!


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn