let str = info;

let c = document.createElement("canvas");

document.body.appendChild.c;

let ctx = c.getContext("2d");

ctx.font = "14px Arial";

let gradient = ctx.createLinearGradient(0, 0, c.width, 0);

gradient.addColorStop("1", "rgba(0,0,0,0.1)");

ctx.fillStyle = gradient;

ctx.setTransform(0.9, -0.4, 0.5, 1, 5, 60);

ctx.fillText(str, 0, 40);

let imgsrc = c.toDataURL("image/png");

let a = document.getElementById('box');

a.style.background = "url(" + imgsrc + ") 0/30%,url(" + imgsrc + ") 25%/30%";

水印 canvas 实现的更多相关文章

  1. canvas添加水印

    <canvas id="canvas"></canvas><canvas id="water"></canvas> ...

  2. html5 canvas 图像处理

    1.图像放大缩小 <script> var cvs = document.getElementById("canvas"); cvs.width = cvs.heigh ...

  3. 使用canvas给图片添加水印, canvas转换base64,,canvas,图片,base64等转换成二进制文档流的方法,并将合成的图片上传到服务器,

    一,前端合成带水印的图片 一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不 ...

  4. Android--从系统Camera和Gallery获取图片优化

    前言 之前有两篇博客讲解了如何从系统内已有的Camera和Gallery应用中获取图片的例子,看到评论里有朋友说有时候会报错,导致程序崩溃的问题.本篇博客主要就这个问题分析讲解一下,最后将以一个简单的 ...

  5. 实用js方法DataUrl转为File、url转base64

    声明:仅为方便自己所需,也希望能方便他人,如有侵权,联系删除. 1,DataUrl转为File /** * DataUrl转为File * @param {String} dataUrl - data ...

  6. Java使用iText7生成PDF

    前言 我们之前使用js库html2canvas + jspdf实现html转PDF.图片,并下载(详情请戳:html页面转PDF.图片操作记录),大致原理是将页面塞到画布里,以图片的方式放到PDF中, ...

  7. 离线合成联想到的--canvas合成水印

    前段时间做了功能模块:用户设置自定义勋章: 实现方式:前端把用户设置的昵称传到后台,后台根据不同用户等级,使用离线合成技术合成不同的勋章返回到前端: 方案算是实现了,但是有点坑就是,后台的离线合成没有 ...

  8. canvas给图片加水印

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 利用canvas添加图片水印--直接上代码

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  10. 赵雅智_运用Bitmap和Canvas实现图片显示,缩小,旋转,水印

    上一篇已经介绍了Android种Bitmap和Canvas的使用,以下我们来写一个详细实例 http://blog.csdn.net/zhaoyazhi2129/article/details/321 ...

随机推荐

  1. expect语言使用之自动切换账户或自动登录远程服务器

    资料来源: (1) https://baike.baidu.com/item/expect/4598715?fr=aladdin (2) https://blog.csdn.net/gsjthxy/a ...

  2. VS2019+ Intel Fortran (oneAPI)+HDF5库的安装+测试

    最近需要读取hdf5文件(*.h5),处于对速度的追求,兼具VS调试程序的需要,使用Fortran+HDF5进行读写. 注意: 此处为动态库连接方式,静态库类似,差异主要为头文件有所差异. 参考网址: ...

  3. 使用Kali破解无线密码

    1.查看网卡信息,是否有wlanX网卡ifconfig 2.启动网卡监听模式 airmon-ng start wlan0 检查下是否处于监听模型:ifconfig查看一下,如果网卡名加上了mon后则成 ...

  4. SqlSession的提交commit

    SqlSession.commit(); 是执行了事务的提交

  5. element-ui中el-table设置多选checkbox时,selection-change重复执行,以及选不中问题

    项目中使用了elementUI中el-table的选择框.在另外一个地方展示选中的行的数量.设置显示数量之后,选择框就无法选中,change事件执行两次. 解决办法:给el-table设置row-ke ...

  6. Hyperledger fabric 2.2.0 环境搭建

    基础环境搭建 ### docker 安装 如果服务器上有旧版的docker,需要先执行卸载操作. $ sudo yum remove docker \ docker-common \ docker-s ...

  7. 冷冻法快速还原Oracle数据库

    1.重新装完系统之后,把D:\app\Administrator\oradata拷贝出来,app目录. 2.安装Oracle数据库,创建一个和oradata目录内同名的实例. 3.通过停止服务的方式关 ...

  8. LaTex【七】latex换行顶格、不缩进

    LaTex换行会默认缩进,如果想不缩进只需要在不需要缩进的内容前面加上 \noindent 命令 ababababababababababab \noindent 不缩进不缩进

  9. mariadb(mysql) redis

    mariadb(mysql) 安装 winodows 略 linux 用yum下载安装,先添加yum源,阿里的yum源mariadb版本比较老,要新版本的还是要用官方的源,具体的官方yum源最好去官网 ...

  10. Spring Security 自定义认证逻辑

    Spring Security 自定义认证逻辑 这篇文章的内容基于对Spring Security 认证流程的理解,如果你不了解,可以读一下这篇文章:Spring Security 认证流程 . 分析 ...