实现一个简单的前端水印
需求分析
水印效果如下:
除了直观需求,还有非直观需求。
- 这是个背景图。
- 文字样式以及文字本身可调整。
对于需求1,需要前端生成图片的能力。
该能力的原理:借用canvas.toDataURL()
或者(new XMLSerializer()).serializeToString()
生成base64编码。
然后就可以很方便地设置背景图了。
对于需求2,canvas
或svg
,或者CSS3
都能实现。
这里使用svg
,因为它比较亲民。
撸函数
下面是svg生成文字的函数。
function getSVGTextBase64(text, svgStyle) {var svgNS = 'http://www.w3.org/2000/svg';function createTag(tag, objAttr) {var oTag = document.createElementNS(svgNS, tag);for (var attr in objAttr) {oTag.setAttribute(attr, objAttr[attr]);}return oTag;}svgStyle = Object.assign({'width': '50px','height': '50px','text-anchor': 'left','font-size': '12px','transform': 'translate(0 50) rotate(-15)','x': '0','y': '1em',}, svgStyle);var oSvg = createTag('svg', { 'xmlns': svgNS, 'width': svgStyle.width, 'height': svgStyle.height, });var oText = createTag('text', svgStyle);oText.innerHTML = text;oSvg.appendChild(oText);return oSvg;
}
这里涉及到的知识点有:
- Object.assign
- svg命名空间
- svg的文字样式属性
坏消息是HTML样式和SVG样式属性名称有部分不一样,好消息是大部分可一一对应。
接下来要把生成的svg序列化,序列化成base64编码。
function encode(input) {function utf8_encode(string) {string = string.replace(/\r\n/g, "\n");var utftext = "";for (var n = 0; n < string.length; n++) {var c = string.charCodeAt(n);if (c < 128) {utftext += String.fromCharCode(c);}else if ((c > 127) && (c < 2048)) {utftext += String.fromCharCode((c >> 6) | 192);utftext += String.fromCharCode((c & 63) | 128);}else {utftext += String.fromCharCode((c >> 12) | 224);utftext += String.fromCharCode(((c >> 6) & 63) | 128);utftext += String.fromCharCode((c & 63) | 128);}}return utftext;}var output = "";var chr1, chr2, chr3, enc1, enc2, enc3, enc4;var i = 0;var _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";input = utf8_encode(input);while (i < input.length) {chr1 = input.charCodeAt(i++);chr2 = input.charCodeAt(i++);chr3 = input.charCodeAt(i++);enc1 = chr1 >> 2;enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);enc4 = chr3 & 63;if (isNaN(chr2)) {enc3 = enc4 = 64;} else if (isNaN(chr3)) {enc4 = 64;}output = output +_keyStr.charAt(enc1) + _keyStr.charAt(enc2) +_keyStr.charAt(enc3) + _keyStr.charAt(enc4);}return output;
}
这个函数涉及到的知识点有:
- 关于base64编码的原理及实现
- Data URI scheme
完整的代码
function getSVGTextBase64(text, svgStyle) {var svgNS = 'http://www.w3.org/2000/svg';function createTag(tag, objAttr) {var oTag = document.createElementNS(svgNS, tag);for (var attr in objAttr) {oTag.setAttribute(attr, objAttr[attr]);}return oTag;}function encode(input) {function utf8_encode(string) {string = string.replace(/\r\n/g, "\n");var utftext = "";for (var n = 0; n < string.length; n++) {var c = string.charCodeAt(n);if (c < 128) {utftext += String.fromCharCode(c);}else if ((c > 127) && (c < 2048)) {utftext += String.fromCharCode((c >> 6) | 192);utftext += String.fromCharCode((c & 63) | 128);}else {utftext += String.fromCharCode((c >> 12) | 224);utftext += String.fromCharCode(((c >> 6) & 63) | 128);utftext += String.fromCharCode((c & 63) | 128);}}return utftext;}var output = "";var chr1, chr2, chr3, enc1, enc2, enc3, enc4;var i = 0;var _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";input = utf8_encode(input);while (i < input.length) {chr1 = input.charCodeAt(i++);chr2 = input.charCodeAt(i++);chr3 = input.charCodeAt(i++);enc1 = chr1 >> 2;enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);enc4 = chr3 & 63;if (isNaN(chr2)) {enc3 = enc4 = 64;} else if (isNaN(chr3)) {enc4 = 64;}output = output +_keyStr.charAt(enc1) + _keyStr.charAt(enc2) +_keyStr.charAt(enc3) + _keyStr.charAt(enc4);}return output;}svgStyle = Object.assign({'width': '50px','height': '50px','text-anchor': 'left','font-size': '12px','transform': 'translate(0 50) rotate(-15)','x': '0','y': '1em',}, svgStyle);var oSvg = createTag('svg', { 'xmlns': svgNS, 'width': svgStyle.width, 'height': svgStyle.height, });var oText = createTag('text', svgStyle);oText.innerHTML = text;oSvg.appendChild(oText);var svgStr = new XMLSerializer().serializeToString(oSvg);var bgUrl = 'data:image/svg+xml;base64,' + encode(svgStr);return bgUrl;
}
实现一个简单的前端水印相关推荐
- 窥探原理:实现一个简单的前端代码打包器 Roid
roid roid 是一个极其简单的打包软件,使用 node.js 开发而成,看完本文,你可以实现一个非常简单的,但是又有实际用途的前端代码打包工具. 如果不想看教程,直接看代码的(全部注释):点击地 ...
- 原生js 基于canvas写一个简单的前端 截图工具
先看效果 <!DOCTYPE html> <html><head><meta charset="utf-8"><title&g ...
- 一个简单的前端获取手机验证码实现
//获取验证码 var wait = 30; var send = true; function getCaptcha(o) { if (0 == wait) { o.removeAttribute( ...
- 一个简单的Webservice的demo(中)_前端页面调用
首先新建项目,这里有两种调用方式,为了能方便理解,新建页面WebserviceTest如下图: 先引用写好的服务,这里用上次写好的服务.见上次写的一个简单的Webservice的demo,简单模拟服务 ...
- React.js 小书 Lesson1-2 - 前端组件化(一):从一个简单的例子讲起
React.js 小书 Lesson1-2 - 前端组件化(一):从一个简单的例子讲起 本文作者:胡子大哈 本文原文:http://huziketang.com/books/react/lesson2 ...
- (简单课设)前端小白刚做的一个简单的移动端项目的分享和总结
前端小白刚做的一个简单的移动端项目的分享和总结 所用技术为简单的div+css 直接上图片 代码部分 小滴服务 接下来是企业项目部分 接下来是我的小滴部分 (另外两个部分内容非常简单,没必要粘贴代码了 ...
- 前端:使用BootStrap搭建一个简单的网页
之前有想法学习一下前端框架的,后来没有坚持下来.连最基础的栅格系统都忘记了.于是,花了一点时间,重新温习了一下.写了一个简单的网页.页面大致是下面这张图.做得比较一般,不过能够自适应各种设备大小了. ...
- 一个简单的数据查询到前端展示总结
前言 做了一个后台查询前端展示的小项目,背景是在前端才刚开始学的时候,以当时能力肯定还差点意思(hh,出自宋老师),当然结果就是面向百度编程啦.项目做完了,从开发到部署一个人搞定历时5天.也算是本人第 ...
- 告诉你一个去除PDF文件水印简单快速的方法
有时候下载一个pdf文件会发里面有水印,正在使用里面内容的时候很不方便,那么如何能去掉这些pdf中的水印呢?下面就告诉你一个去除PDF文件水印简单快速的方法. 方法/步骤 先安装一个迅捷pdf编辑器, ...
最新文章
- LINUX 使用tcgetattr函数与tcsetattr函数控制终端五
- C++ 虚函数和纯虚函数的区别
- 下行物理信道rs_基于大规模MIMO技术的中继协作物理层安全研究
- QT 4.8.5支持电容触摸屏 和 鼠标
- 做最酷的Windows Phone应用
- String... 参数定义中有三个点的意思
- 3,外键之表关联关系,修改表,复制表
- 学习python遇到的一些有趣点(每日更新)
- python 封闭图形面积_python实现计算图形面积
- MapGIS云认证失败
- 进制转换函数 Java
- 基于单片机的红绿黄灯设计(单片机实验交通灯设计)
- 常用国内镜像源地址汇总
- 修复计算机系统还原,怎么给电脑系统做一键恢复
- 【python Windows安装教程】
- 刚刚!华为突然传来这一消息,我想辞职回家养猪了!
- AWGN信道下卷积编码、viterbe译码、分别采用软硬判决,进行误码率分析
- Python中记录程序运行时间
- 联发科MT5592数字电视DTV芯片处理器参数介绍
- Chained Declustering