实现一个简单的前端水印

需求分析

水印效果如下:
TB1qLJBQXXXXXaBXVXXXXXXXXXX-508-295.png

除了直观需求,还有非直观需求。

  1. 这是个背景图。
  2. 文字样式以及文字本身可调整。

对于需求1,需要前端生成图片的能力。
该能力的原理:借用canvas.toDataURL()或者(new XMLSerializer()).serializeToString()生成base64编码。
然后就可以很方便地设置背景图了。

对于需求2,canvassvg,或者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;
}

这里涉及到的知识点有:

  1. Object.assign
  2. svg命名空间
  3. 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;
}

这个函数涉及到的知识点有:

  1. 关于base64编码的原理及实现
  2. 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;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/456795.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

QQ客服聊天功能网页跳转只需要几行代码

<html><head><meta charset"utf-8"></head><body><a target"_blank" href"http://wpa.qq.com/msgrd?v3&uin客服QQ号&siteqq&menuyes"><img border"0" src"http://wpa.qq.co…

HDU 2234 IDA*

无题I Time Limit: 10000/10000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission(s): 1648 Accepted Submission(s): 640 Problem Description一天机器人小A在玩一个简单的智力游戏&#xff0c;这个游戏是这样的&#xff0c;在一个4*4的矩阵…

Linux环境下Mysql的安装教程及安装过程常见问题的解决方法

最近安装mysql时看到一篇不错的文章 1、下载 下载地址&#xff1a;http://dev.mysql.com/downloads/mysql/5.6.html#downloads 下载版本&#xff1a;我这里选择的5.6.33&#xff0c;通用版&#xff0c;linux下64位 也可以直接复制64位的下载地址&#xff0c;通过命令下载&a…

最全的微信小程序源代码

wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo&#xff1a;百度小说搜索 shitoujiandaobu 小程序&#xff1a;石头剪刀布&#xff08;附代码说明&#xff09; audiodemo 微信小程序开发之视频播…

java 双重检查加锁弊端

http://blog.csdn.net/axman/article/details/1089196 Java是在语言级提供对线程的支持,所以Java的内存模型分为主存储器和工作存储器. [Main memory]主存储器就是实例所在的存储区域,所有实例本身都被放在主存储器中,当然这 句话本身就说明了实例的字段也在主存储器中,主存储器…

爬虫的复习手册

爬虫的概念 模拟浏览器发送请求&#xff0c;获取响应 爬虫的流程 url---》发送请求&#xff0c;获取响应---》提取数据---》保存 发送请求&#xff0c;获取响应---》提取url&#xff08;下一页&#xff0c;详情页&#xff09;重新请求 爬虫要根据当前url地址对应的响应为准 …

Hive安装报错:Unable to instantiate org.apache.hadoop.hive.ql.metadata.SessionHiveMetaStoreClient的解决办法

最近练习Hive&#xff0c;安装时爆出如下错误&#xff1a;Unable to instantiate org.apache.hadoop.hive.ql.metadata.SessionHiveMetaStoreClient的错误 报错的日志如下&#xff1a; Exception in thread "main" java.lang.RuntimeException: java.lang.RuntimeE…

要读

http://www.cnblogs.com/yangml/p/3828878.html转载于:https://www.cnblogs.com/qinqiu/p/6134683.html

Spark分布式集群的搭建和运行

集群共三台CentOS虚拟机&#xff0c;一个Matser&#xff0c;主机名为master&#xff1b;三个Worker&#xff0c;主机名分别为master、slave03、slave04。前提是Hadoop和Zookeeper已经安装并且开始运行。 1. 在master上下载Scala-2.11.0.tgz&#xff0c;复制到/opt/下面&#xf…

Hive2.1.1的安装教程(元数据放在本地Mysql)

目录1.上传tar包2.解压3. 设置环境变量4.设置Hive的配置文件5.启动Hive6.安装MySQL7.下载MySQL的驱动包8.修改Hive的配置文件9.启动Hive10.查看MySQL数据库 目录 1.上传tar包 jar包地址&#xff1a;http://hive.apache.org/downloads.html 2.解压 tar -zxvf apache-hive-2…

App性能优化之内存优化

2019独角兽企业重金招聘Python工程师标准>>> 为什么要进行内存优化呢&#xff1f;其实我们可以反过来想。如果不进行内存优化会产生什么样的问题&#xff1f; App的运行是有内存限制的&#xff0c;超过限制会产生OOM&#xff0c;导致App崩溃。如果内存不进行优化&am…

python+Tesseract-OCR实现图片识别(只适合新手)

1.首先准备环境&#xff1a; python版本&#xff1a;2.7/3.6 操作系统&#xff1a;windows系统 2.准备工具&#xff1a; tesseract-ocr 安装后设置好环境变量 链接: https://pan.baidu.com/s/1j8lBbQBrrbPaHAn5ujWFSw 提取码: 2med Pycharm 3.安装相关python包&#xf…

Linux 网络编程详解四(流协议与粘包)

TCP/IP协议是一种流协议&#xff0c;流协议是字节流&#xff0c;只有开始和结束&#xff0c;包与包之间没有边界&#xff0c;所以容易产生粘包&#xff0c;但是不会丢包。 UDP/IP协议是数据报&#xff0c;有边界&#xff0c;不存在粘包&#xff0c;但是可能丢包。 产生粘包问题…

解决selenium.common.exceptions.WebDriverException: Message: unknown error: call function result missin

(Session info: chrome73.0.3683.103)(Driver info: chromedriver2.30.477700 (0057494ad8732195794a7b32078424f92a5fce41),platformWindows NT 10.0.17134 x86_64)报错如上&#xff0c;由于版本不兼容 下面是谷歌浏览器与chromedriver的版本对应关系&#xff0c;供参考&#…

执行Hive语句报错:FAILED: Error in metadata: javax.jdo.JDOFatalDataStoreException: Access denied for user '

安装个Hive真不省心&#xff0c;各种问题。最近安装好Hive后执行Hive语句时碰到这样的错误&#xff1a; hive> show databases; FAILED: Error in metadata: javax.jdo.JDOFatalDataStoreException: Access denied for user rootlocalhost (using password: YES) NestedThr…

GPU

import tensorflow as tf a tf.constant([1.0,2.0,3.0,4.0,5.0,6.0],shape[2,3],namea) b tf.constant([1.0,2.0,3.0,4.0,5.0,6.0],shape[3,2],nameb) c tf.matmul(a,b)sess tf.Session(configtf.ConfigProto(log_device_placementTrue)) print sess.run(c)

阿里云部署django项目流程【centos7+python3+mysql】

购买阿里云服务器 到[阿里云官网]&#xff0c;选择轻量应用服务器&#xff0c; 步骤如图所示&#xff1a; 地域随便选择哪一个&#xff0c;镜像的话&#xff0c;对比了CentOS&#xff0c;Debian&#xff0c;Ubuntu&#xff0c;我最终选择了CentOS&#xff0c;因为流行嘛&…

XidianOJ 1123 K=1 Problem of Orz Pandas

题目描述 One panda named orz is playing a interesting game, he gets a big integer Num and an integer K. In this game, he can exchange two single numbers in Num. For example, he can get 1243 from 3241 by exchange 1 and 3.But orz can exchange at most K times…

对于频繁的写数据处理方式

添加一个新的表情的时候 调用 recentEmotions方法 将所有表情写入数组 每次都是 添加一个新的表情进来 要将沙盒中的所有表情首先加载进数组&#xff0c;然后将表情添加到数组里面 然后在将数组写入沙盒 处理方式 没有必要每次都要到沙盒里面读取数组文件 类方法 不能访问 成员…

在Mysql中显示所有用户的操作教程(Linux环境下)

1.登录数据库 首先&#xff0c;你需要使用如下命令登录到数据库&#xff0c;注意&#xff0c;必须是root用户哦~ mysql -u root -p 2.查询用户表 在Mysql中其实有一个内置且名为mysql的数据库&#xff0c;这个数据库中存储的是Mysql的一些数据&#xff0c;比如用户、权限信…