-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
15692118659
沉沙
2018-08-20
来源 ：
阅读 1189
评论 0
摘要：本篇教程介绍了jQuery图片如何自动添加水印插件，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。
本篇教程介绍了jQuery图片如何自动添加水印插件，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。
<
JS脚本(jQuery)为图片加水印效果预览：//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="//hovertree.com/texiao/jquery/94/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="//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="//hovertree.com/texiao/jquery/94/img/1.png" />
<img src="//hovertree.com/texiao/jquery/94/img/2.jpg" />
</div>
<script src="//down.hovertree.com/jquery/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="//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="//hovertree.com/" target="_blank">何问起</a> <a href="//hovertree.com/h/bjag/kfq30wnj.htm" target="_blank">说明</a></p>
</div>
</body>
</html>
本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道！
喜欢 | 1
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式AI+学习就业服务平台 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
资料领取
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
