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图片自动添加水印插件的更多相关文章

  1. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  2. 八款强大的jQuery图片滑块动画插件

    jQuery是一款相当轻巧的JavaScript框架,目前几乎每一个WEB项目都在使用jQuery,因为jQuery插件实在太丰富,尤其是 一些图片滑块插件和jQuery焦点图插件,更是多如牛毛,很多 ...

  3. 10款好用的 jQuery 图片切换效果插件

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...

  4. 精心挑选10款优秀的 jQuery 图片左右滚动插件

    在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...

  5. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

  6. 30+最佳Ajax jQuery的自动完成插件的例子

    在这篇文章中,我们将介绍35个jQuery AJAX的自动完成提示例子. jQuery 的自动完成功能,使用户快速找到并选择一定的价值.每个人都想要快速和即时搜索输入栏位,因为这个原因,许 流行的搜索 ...

  7. jquery 图片自动无缝滚动

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...

  8. 美女jquery图片播放器插件

    相册在线查看http://keleyi.com/keleyi/phtml/image/6.htm 可全屏,可拖动,可自动播放的jquery图片展示插件 使用说明:1.引用css文件:<link ...

  9. jquery图片轮播插件slideBox

    效果预览: 源代码下载: jQuery图片轮播(焦点图)插件jquery.slideBox 特点:兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定 ...

随机推荐

  1. 本地计算机上的 postgresql 服务启动后停止解决方法

    在启动 postgresql 服务是遇到这种情况: 解决方法: 打开计算机管理====>查看应用程序日志信息,可以看出,由于日志配置错误的问题. 找到 postgresql.conf 文件,做如 ...

  2. 配置python3

    1. 下载解压.$ wget https://www.python.org/ftp/python/3.4.1/Python-3.4.1.tgz$ tar zxvf Python-3.4.1.tgz 2 ...

  3. 2015-10-27 C#3

    三.字符串拼凑stringbuilder stringbuilder sb= new stringbuilder(); sb.append("aaa"); sb.append(&q ...

  4. Linux Shell基线配置高级操作

    一.输入解析类 1.1 echo解析tab和换行 问题描述:echo默认是原样输出字符串,并不解析\t和\n等反斜杠字符,如下图所示.我们希望echo能解析\t和\n等字符. 处理办法:可以使用-e指 ...

  5. popstate事件在低版本webkit中的调用

    popstate是H5的history系列中的事件,但是在低版本的webkit中会自动触发.H5中的history api是不会使页面发生跳转的,只是操作地址栏和响应的state属性而已,而且是手动操 ...

  6. Win10系列：C#应用控件进阶7

    PathGeometry 前面介绍了Path的使用方法,接下来介绍PathGeometry类.PathGeometry提供了描绘由弧线.曲线和直线组成的多个复杂图形的方法.PathGeometry的核 ...

  7. Win10优化：这8个操作简单的小方法让你的Win10系统更加流畅

    目前,市场上比较流行的主流电脑系统无非就是win7和win10这两个,这两个也是比较稳定的.但是自从微软发布将于2020年停止对win7支持后,很多小伙伴也表示无奈之下得升win10了啊. win10 ...

  8. keeplived

    keepalived高可用集群.   keepalived故障切换转移原理1vrrp协议:(vritual router redundancy protocol)虚拟路由冗余协议,2故障转移.keep ...

  9. Android Studio修改apk打包生成名称

    在app的build.gradle文件的android{}括号里添加: android.applicationVariants.all { variant -> variant.outputs. ...

  10. windows下启动和运行分布式消息中间件消息队列 kafka

    本文转载至:https://www.cnblogs.com/flower1990/p/7466882.html 一.安装JAVA JDK 1.下载安装包 http://www.oracle.com/t ...