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

jquery image watermark plug-in

黄舟
Release: 2017-01-19 14:56:46
Original
2349 people have browsed it

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>
Copy after login

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" />
Copy after login

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
    });
 
});
Copy after login

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)!


Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template