图片/图形

Img2Blob 图片水印jQuery特效插件

阿里云


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

使用方法

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

也想出现在这里?联系我们
创客主机
  1. <script src="path/to/jquery.min.js"></script>
  2. <script src="path/to/img2blob.js"></script>

HTML 结构

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

默认图片

  1. <img class="sample1" data-img2blob="img/1.png" />
  2. <img class="sample1" data-img2blob="img/2.jpg" />
  3.  
  4. <hr>
  5.  
  6. <h3>添加水印之后的图片</h3>
  7. <img class="sample2" data-img2blob="img/1.png" />
  8. <img class="sample2" data-img2blob="img/2.jpg" />

初始化插件

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

  1. $(function() {
  2.  
  3.     // default
  4.     $(".sample1").img2blob();
  5.  
  6.     // with watermark
  7.     $(".sample2").img2blob({
  8.         watermark: '@bachors',
  9.         fontStyle: 'Arial',
  10.         fontSize: '30', // px
  11.         fontColor: '#333', // default 'black'
  12.         fontX: 50, // The x coordinate where to start painting the text
  13.         fontY: 50 // The y coordinate where to start painting the text
  14.     });
  15.  
  16. });

Github 地址:https://github.com/bachors/Img2Blob.js

Img2Blob 图片水印 jQuery 特效插件

已有 813 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

评论:

1 条评论,访客:0 条,博主:0 条
  1. 游客001
    游客001发布于: 

    请问这个水印除了文字可以结合图片吗

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!