原理:通过动态生成canvas然后转为base64格式
代码Demo
export const waterMark = (text) =>{
let _wm = document.createElement('canvas')
_wm.setAttribute('width',150)
_wm.setAttribute('height',100)
let ctx = _wm.getContext('2d')
ctx.fillStyle = '#d2d2d2'
ctx.font= "13px 宋体"
ctx.translate(60,50)
ctx.rotate(-0.5)
//ctx.fillRect()
ctx.fillText(text,0,0)
return _wm.toDataURL()
}

js动态生成水印的更多相关文章

  1. JS动态生成的元素,其对应的方法不响应(比如单击事件,鼠标移动事件等)

    主要原因:在页面给元素注册点击事件的时候[ $(function () {  XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...

  2. 抓取Js动态生成数据且以滚动页面方式分页的网页

    代码也可以从我的开源项目HtmlExtractor中获取. 当我们在进行数据抓取的时候,如果目标网站是以Js的方式动态生成数据且以滚动页面的方式进行分页,那么我们该如何抓取呢? 如类似今日头条这样的网 ...

  3. js动态生成数据列表

    我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js ...

  4. 2)JS动态生成HTML元素的爬取

    2)JS动态生成HTML元素的爬取 import java.util.List; import org.openqa.selenium.By; import org.openqa.selenium.W ...

  5. qrcode.js 动态生成二维码

    用qrcode.js动态生成二维码图片非常简单,只需要引入qrcode.js即可使用,而且可以自定义图片大小.背景色等信息. 1.jsp代码---页面头部引入qrcode.js,jquery文件可选 ...

  6. js 动态生成html 触发事件传参字符转义

    通常,在使用 JS 动态生成 html 的过程中,会嵌入相应的样式.事件等属性元素,而这时经常会出现所谓的 “单.双引号不够用” 的情况,别急,这时可以利用 html 语言中的转义字符来解决.下面就来 ...

  7. 爬虫案例(js动态生成数据)

    需求:爬取https://www.xuexi.cn/f997e76a890b0e5a053c57b19f468436/018d244441062d8916dd472a4c6a0a0b.html页面中的 ...

  8. JS 动态生成JSON对象

    JS 动态生成JSON对象,一般用到JSON传递参数的时候,会用到. function onGeneratedRow(columnsResult) { var jsonData = {}; colum ...

  9. 抓取js动态生成的数据分析案例

    需求:爬取https://www.xuexi.cn/f997e76a890b0e5a053c57b19f468436/018d244441062d8916dd472a4c6a0a0b.html页面中的 ...

随机推荐

  1. git 上传文件到仓库上提示:origin does not to be a git repository

    最近上传代码到GitHub的时候,当我输入 git push -u origin master的时候,它提示: origin does not to be a git repository 在网上找到 ...

  2. 180328_gVim设置tab为4个空格

    找到gVim安装目录 C:\Program Files (x86)\Vim\ 更改目录下的 _vimrc 文件,这是一个只读文件,需要管理员权限进行修改和保存. 在文件末尾添加下列内容: set ts ...

  3. Object toString方法

    1.System.out.println()里的参数会自动调用toString方法. package com.mydemo.controller; // 1.getClass().getName() ...

  4. Pig autocomplete 自动补全

    在pig的grunt环境下,按TAB键可以自动补全命令,用户可以添加自己的补全信息. 在conf目录下创建autocomplete文件,添加如下内容: hdfs://vm1:8020/   在grun ...

  5. logminer系列文章一(logminer的使用)

    转自 http://blog.itpub.net/26613085/viewspace-1064008/ 1.安装logminer以及生成logminer数据字典所需要的包(需使用sys用户) [or ...

  6. STL中 vector 和 list 一些特性

    STL中的vector特点是: 其容量在需要时可以自动分配,本质上是数组形式的存储方式.即在索引可以在常数时间内完成.缺点是在插入或者删除一项时,需要线性时间.但是在尾部插入或者删除,是常数时间的. ...

  7. 对《SQL Server中tempdb的management》的一些更正和补充

    对<SQL Server中tempdb的management>的一些更正和补充 前几天看了这篇文章:SQL Server中tempdb的management 发现里面有些内容不是很准确 文 ...

  8. ActiveMq--消息队列

    ActiveMQ官网下载地址:http://activemq.apache.org/download.html ActiveMQ的目录: bin存放的是脚本文件 conf存放的是基本配置文件 data ...

  9. nginx安装脚本

    #!/bin/bash#auto config Nginx#by zhangjia 2019#define Path variables#date:2019/1/16 check_ok() { ]] ...

  10. 铁乐学python_day04-作业

    1,写代码,有如下列表,按照要求实现每一个功能 li = ['alex', 'wusir', 'eric', 'rain', 'alex'] 计算列表的长度并输出 print(len(li)) 答:结 ...