jquery页面水印插件,支持多行水印、行错开

简介:

最近工作需求,需要在页面上加水印,但发现网上示例无法满足我的需求,所以还是自己动手写。

有几个特别需求:

1.可以写多行水印,并且中心对齐。

2.每行水印错开。

PS:我找到的例子都是单行水印,所以用不了,想做的效果如下。

(图1)
实现思路

实现页面水印主要是有两种方法。

1.DOM元素

就是将水印放置DOM元素里,按一定规律铺设在目标区域。

优点:

(1).元素计算方式相对简单些

缺点:

(1).目标区域长宽可能会变化,水印元素需要动态设置。
(2).在一片区域中,可能会导致页面DOM元素过多。

2.canvas

先将水印写在canvas里,然后生成背景图,用背景图铺设。

优点:

(1).不用担心目标区域动态变化。

缺点:

(2).计算方式复杂。

思量后,选择了第二种实现方式,性能为重。

实现难点

1.canvas没有针对文字的旋转

在canvas绘图里面,没有针对文字旋转的控制,所以只能旋转画布后,对每行文字一个个按规律排放。

如下图,x0y是视区(也就是你能看到的),x’0y’是旋转了A角度后的画布,所以我们在画布绘制时,每行文字的位置都要做一个修正。

(图2)

PS:矩形代表每行文字,width是每行文字的水平间距,height是第一行文字y坐标。

得出每行文字坐标公式是(伪代码):

x = width * cosA;

y = x * tanA + height;

2.每行水印错开
如果我们只生成一行水印,那么当做背景图使用时候,那么在竖方向上,都是一样的,这样看起来有点僵硬,如下图。

(图3)

所以在错开的方法上,我使用了三个canvas,第一个canvas正式绘制,第二个将文字数组倒过来绘制,将前两个绘制在第三个canvas上,这样就错开了。

3.每行文字长度不等引起的水平间距问题

如下图,a、b是两段文字,较长的b会导致水平方向间距变大,如果直接使用做背景图,那么在背景repeat时候,将存在水平方向长短不一情况,看起来很难受。

(图4)

对于这个问题,我的解决方法是,将a、b两段文字水平方向上重复绘制多次,就变成绘制a、b、a、b、a、b,在足够多的次数后,看到间距就正常。

4.第一行文字x不是从0开始

其实在画布旋转后,在视窗里看到的第一行就不是从0开始(虽然绘制是0),从图2就可以看到,还有一段距离。

(图5)

例如将第一行移到视窗p点,那么就要做tx、ty的修正,伪代码:

tx = height * sinA * cosA;

ty = height * sinA * sinA;

PS:这个地方如果有人看我代码,就会发现ty乘多一个sinA,位移才正确,这一点我也想不懂,希望有人知道告诉我。

代码

我将代码放到GitHub上,有啥建议请提。

代码地址: https://github.com/codingforme/jquery-watermark

最后的效果,其实就是图1。

 

总结

这是个简单的插件,代码不多,其实本身也不需要jquery,只是习惯性这么实现。这里其实有个重点,就是视区和画布,我在svg文章里面有总结过,可以看看,另外我遇到的几个难点的解决办法,希望对大家有所发现。

 

本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。

本文地址 :http://www.cnblogs.com/lovesong/p/6979128.html



本文转自 海角在眼前 博客园博客,原文链接: http://www.cnblogs.com/lovesong/p/6979128.html  ,如需转载请自行联系原作者

相关文章
|
1月前
jQuery+Slick插件实现游戏人物轮播展示切换源码
jQuery+Slick插件实现游戏人物轮播展示切换源码
39 14
|
2月前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
57 9
|
2月前
|
移动开发 JavaScript 前端开发
简单易用的jquery响应式轮播图插件ma5slider
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽,可以通过CSS定制外观,支持无限循环模式,内置水平,垂直和淡入淡出三种轮播图过渡动画效果。
|
2月前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
34 2
|
2月前
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。
|
JavaScript 前端开发
JQuery 页面如何快速滚动到顶部?
JQuery 页面如何快速滚动到顶部?
144 0
JQuery 页面如何快速滚动到顶部?
|
前端开发 JavaScript
JQuery 页面如何快速滚动到顶部?
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/48517971 JQuery 网页如何快速的滚动到顶部?现如今,页面元素不断丰富,就导致页面的纵深比较广,那么用户一旦阅读网页到了底部,就会产生一个快速滚动到顶部的需求,当然了,很多网页都这样实现了。
835 0
|
2月前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
69 21
|
2月前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
65 16
|
2月前
|
JavaScript
简洁实用的jQuery进度条插件
这是一款简洁实用的jQuery进度条插件。该插件使用简单,通过在页面中放置指定的HTML代码,即可生成带动画效果的进度条。