当前位置:JS特效 » 图片效果 » jquery图片水印插件
 jquery图片水印插件
如果您觉得内容不错,请分享:
标签: 图片效果水印

插件介绍

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

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:61
简要教程

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

使用方法

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


           
                
HTML结构

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

默认图片


添加水印之后的图片

初始化插件

在页面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
    });

});
                

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

Top