Watermark是一个jQuery插件，可使用HTML5和Javascript在图像上添加水印-BFW插件库

Watermark是一个jQuery插件，可使用HTML5和Javascript在图像上添加水印

Watermark是一个jQuery插件，可使用HTML5和Javascript在图像上添加水印。

特征

使用图像或文本进行标记。

允许您选择要在图像的8个角上标记的位置。

标记图像后的大小和格式选项。

将图像导出为base64类型，因此可以直接将其导出到旧照片或上载服务器中，例如允许使用Imgur。

使用方式：

第一步引入bfwone 加载依赖项jquery

第二步use插件

第三步配置参数

$(function() {
  $(SELECTOR).watermark(OPTIONS);
});

OPTIONS如下

Name	Type	Default	描述
path	String	'watermark.png'	水印图片url，也可设置base64图片字符串
text	String	''	文字水印中文字
textWidth	Number	130	文字宽度，单位: 像素.
textSize	Number	12	字体大小，单位: 像素.
textColor	String	'white'	文字颜色 HEX or RGBA color codes.
textBg	String	'rgba(0, 0, 0, 0.4)'	文字背景色 you can use HEX or RGBA color codes.
gravity	String	'se'	水印位置 (nw, n, ne, w, e, sw, s, se, c).
opacity	Number	0.7	水印透明度 the value between 0 and 1.
margin	Number	10	水印边距.
outputWidth	Number	'auto'	图片宽度
outputHeight	Number	'auto'	图片高度
outputType	String	'jpeg'	创建水印后图片格式
done	Function	`function(imgURL){this.src=imgURL;}`	水印创建完成后的回调
fail	Function	`function(){}`	水印创建出错的回调
always	Function	`function(){}`	处理完成回调，无论成功或失败

完整代码示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.watermark"], function() {
                $(function() {
                    $('.img_water').watermark({
                        path: 'http://repo.bfw.wiki/bfwrepo/icon/5d834e33872ba.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_40,h_40,/quality,q_90'
                    });
                    $('.img_awesome').watermark({
                        text: 'bfw.wiki',
                        textWidth: 300,
                        gravity: 'w',
                        opacity: 1,
                        margin: 18
                    });
                });
            });
        });
    </script>
    <style>
    </style>
</head>
<body>
    <h2>图片水印</h2>
    <img class="img_water"  src="http://repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" />
    
    <h2>文字水印</h2>
    <img class="img_awesome" src="http://repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" />
</body>
</html>

github地址：https://github.com/lelinhtinh/watermark