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. 蓝桥杯训练赛二-问题 A

    题目描述 用简单素数筛选法求N以内的素数. 输入 N 输出 2-N的素数 样例输入 100 样例输出 2 3 5 7 11 13 17 19 23 29 31 37 41 43 47 53 59 61 ...

  2. Python游戏开发常用库

    PyWeek:编程挑战,主要是Python游戏开发方面的 PyGame:PyGame在优秀的SDL库之上添加了更多功能.允许使用python语言创建功能齐全的游戏和多媒体程序.具有高度的可移植性,几乎 ...

  3. vue项目，npm run dev的时候出现：Error: error:0308010C:digital envelope routines::unsupported

    vue项目,npm run dev的时候出现:Error: error:0308010C:digital envelope routines::unsupported 这个是node的版本问题.我的n ...

  4. 一 MySQL的架构与历史1.1--1.4

    1.1 MySQL逻辑架构 最上层的服务并不是 MySQL 所独有的,大多数基于网络的客户端/服务器的工具或者服务都有类似的架构.比如连接处理.授权认证.安全等等. 第二层架构是MySQL比较有意思的 ...

  5. android 编译错误::Extension with name 'kotlin' does not exist

    An exception occurred applying plugin request [id: 'kotlin-kapt']> Failed to apply plugin 'kotlin ...

  6. vue本地运行项目使用iframe的跨域问题

    1.获取iframe中的window对象 为了兼容大多数浏览器,应使用iframeElement.contentWindow来获取 https://blog.csdn.net/xiongzhengxi ...

  7. phaclon 初学者遇到的问题！

    1,框架安装  需要安装PHALCON扩展. 2,Nginx伪静态 配置 3,app.ini  常量配置等配置 4,主体目录结构 互相调用及 类的注册服务 依赖注入 自动加载项问题. 5,数据库相关操 ...

  8. 关于uniapp 打自定义基座部分手机不能自动安装的问题

    部分手机指的是-------没错就辣鸡 vivo手机 解决办法----进入手机文件管理-----根目录-----会有一个你打包的app.apk文件,手动安装一下就好了 搜索 复制

  9. 【C学习笔记】day2-1 给定两个整形变量的值，将两个值的内容进行交换

    #include<stdio.h> int main() { int a=0, b=1,temp; temp = b; b = a; a = temp; //printf("%d ...

  10. jquery获取父级容器高度

    //获取浏览器显示区域的高度console.log( $(window).height()); //获取浏览器显示区域的宽度console.log($(window).width()); //获取页面 ...