Img2Blob.js 是一款可以为图片添加自定义水印的 jquery 插件。该 jquery 图片水印插件可以将图片转换为 blob 对象,然后为其添加自定义水印效果。
在页面中引入 jquery 和 img2blob.js 文件。
<script src="path/to/jquery.min.js"></script>
<script src="path/to/img2blob.js"></script>
该自定义图片水印插件的默认效果和水印效果的 HTML 结构分别如下:
<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: '@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
});
});
Github 地址:https://github.com/bachors/Img2Blob.js
演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!
要发表评论,您必须先登录。
请问这个水印除了文字可以结合图片吗