随笔分类

随笔档案

相册

阅读排行榜

评论排行榜

最新评论

1. Re:留言列表模板HTML代码
1
--让星星跟你道晚安
2. Re:程序员用HTML5制作的爱心树表白动画
@一梦逍遥3 换一个Html...
--剑起苍穹
3. Re:程序员用HTML5制作的爱心树表白动画
@剑起苍穹我也是这样，不知道怎么解决...
--一梦逍遥3
4. Re:Web前端资源汇总
推荐：2021年百度大牛亲授最详细、最全面的前端视频教程：
--码农农农
5. Re:Web前端资源汇总
《JavaScript设计模式》作者张容铭讲解2021年史上最全前端教程免费分享，需要的私聊
--CLH_zza

jQuery图片自动添加水印插件

JS脚本(jQuery)为图片加水印效果预览：
http://hovertree.com/texiao/jquery/94/

本功能使用HTML5实现，可为图片加上文字水印，可设置文字，设置颜色，位置等，加水印的图片需和网页在同个域名下。

完整代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jQuery图片自动添加水印插件 - 何问起</title>
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/94/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/94/css/demo.css" />
</head>
<body>

<div class="zzsc-content">
    <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" />

    <h3>原图</h3>
    <img src="http://hovertree.com/texiao/jquery/94/img/1.png" />
    <img src="http://hovertree.com/texiao/jquery/94/img/2.jpg" />
</div>

<script src="http://down.hovertree.com/jquery/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="http://hovertree.com/texiao/jquery/94/js/img2blob.js" type="text/javascript"></script>        
<script type="text/javascript">
$(function() {

    // default
    $(".sample1").img2blob();
    
    // with watermark
    $(".sample2").img2blob({
        watermark: '@何问起',
        fontStyle: 'Microsoft YaHei,Arial',
        fontSize: '30', // px
        fontColor: 'red', // default 'black'
        fontX: 20, // The x coordinate where to start painting the text
        fontY: 40 // The y coordinate where to start painting the text
    });

});
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：FireFox、Chrome、Opera、傲游、搜狗、360、世界之窗. 不支持Safari、E8及以下浏览器。</p>
<p>来源：<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/h/bjag/kfq30wnj.htm" target="_blank">说明</a></p>
</div>
</body>
</html>