Rumah  >  Artikel  >  hujung hadapan web  >  jquery图片水印插件

jquery图片水印插件

黄舟
黄舟asal
2017-01-19 14:56:462306semak imbas

简要教程

Img2Blob.js是一款可以为图片添加自定义水印的jquery插件。该jquery图片水印插件可以将图片转换为blob对象,然后为其添加自定义水印效果。

使用方法

在页面中引入jquery和img2blob.js文件。

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

HTML结构

该自定义图片水印插件的默认效果和水印效果的HTML结构分别如下:

<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" />

初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该图片水印插件

$(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
    });
 
});

Img2Blob.js图片水印插件的github地址为:https://github.com/bachors/Img2Blob.js

以上就是jquery图片水印插件的内容,更多相关内容请关注PHP中文网(www.php.cn)!


Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn