首页 > Web开发 > 详细

jQuery图片自动添加水印插件

时间:2017-02-11 18:04:27      阅读:675      评论:0      收藏:0      [点我收藏+]

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>

源码下载:http://hovertree.com/h/bjag/vgp0pyov.htm

推荐:http://www.cnblogs.com/jihua/p/webfront.html

jQuery图片自动添加水印插件

原文:http://www.cnblogs.com/jihua/p/jquerywatermark.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!