canvas添加水印思路

1.在画布上写上水印的名称(时间加上用户名)

2.canvas转化为base64，作为body的背景色

3.优化倾斜度和透明度

4.如果用户去除body的style水印消失

5.鸡肋 MutationObserver

在画布上写上水印的名称

<body>

  <canvas id="canvasDom" ></canvas>

  <script>

    // 获取当前时间

    function curentTime(userName='张三'){

      let newTime = new Date();

      // 获取年

      let newYarn = newTime.getFullYear()

      // 获取月

      let newMonth = (newTime.getMonth() + 1) > 9 ? ( newTime.getMonth() + 1) : "0" + ( newTime.getMonth() + 1);

      // 获取时间

      let newDay = newTime.getDate() > 9 ? newTime.getDate() : "0"+date.getDate();

      return newYarn + '-' + newMonth +' -' + newDay + '-'+ userName

    }

    // 获取dom节点

    let canvasDom=document.getElementById('canvasDom')

    // 设置canvas的大小

    canvasDom.width=800

    canvasDom.height=460

    // 获取canvs上下文

    const ctx= canvasDom.getContext('2d')

    //设置文字的大小 以及字体样式

    ctx.font = "30px Verdana"

    // 填充文字以及位置

    ctx.fillText(curentTime(), 100,100)

  </script>

</body>

canvas转化为base64，作为body的背景色

我们使用 toDataURL('image/png')将画布转为base64.

然后在在将它作为背景色设置在body上。

这样我们就实现了水印的添加


// 获取dom节点

let canvasDom=document.getElementById('canvasDom')

// 设置canvas的大小

canvasDom.width=800

canvasDom.height=460

// canvas重叠部分隐藏

canvasDom.style.display='none'

// 获取canvs上下文

const ctx= canvasDom.getContext('2d')

//设置文字的大小 以及字体样式

ctx.font = "30px Verdana"

// 填充文字以及位置

ctx.fillText(curentTime(), 30,210)

// 将它转化为base64

const img=canvasDom.toDataURL('image/png')

console.log('img', img)

let body = document.getElementById('body')

body.setAttribute('style',`background-image:url("${img}")`)

优化倾斜度和透明度

// 设置透明度

ctx.fillStyle = 'rgba(0,0,0,.3)'

// 设置倾斜度

ctx.rotate(0.2)

// 填充文字以及位置

ctx.fillText(curentTime(), 30,150)


需要注意的是：透明度和清晰度要在文字填充之前设置。

否者就不会生效。

这个也很好理解，因为有先后顺序。

出现了一点小的意外

如果别人知道了我们的原理。

就只需要通过控制台取消掉body的style就行。

也就是说：咋们这个方法可能是白做了。

难受，啊！

如果不能取消或者可以监听就好了。

鸡肋辅助 MutationObserver 登场

如果有一个方法可以监听DOM树属性发生变化就好了。

如果发生了变化。我在重新调用一次就可以解决。

其实还真的存在这样一个API。

他就是MutationObserver。

MutationObserver给我们提供DOM树属性在某个范围内发生变化时作出一定的反应。

MutationObserver的基本用法就是:

// Firefox和Chrome早期版本中带有前缀进行兼容

var MutationObserver = window.MutationObserver ||

  window.WebKitMutationObserver ||

  window.MozMutationObserver

// 选择目标节点

var target = document.getElementById('domID');

// 回调函数

function callBack(){

  console.log('dom树发生变化我会被触发')

}

// 第一步： 创建观察者对象

var observer = new MutationObserver(callBack);

// 第二步：配置观察选项:

var config = { attributes: true, childList: true, characterData: true }

//第三步： 传入目标节点和观察选项

observer.observe(target, config);

// 随后,你还可以停止观察

observer.disconnect();

在控制台属性发生变化重新调用一次

function watchBody(){

 console.log('body的DOM发生了变化被我监听到了')

}

const observer = new MutationObserver(watchBody)

const targetNode = body

const setConfig = { attributes: true}

observer.observe(targetNode, setConfig)

报告：又发现问题，出现多次调用

虽然我们通过监听dom数属性发生变化后，

再次调用水印的方法。用户无法去除水印。

但是造成了多次调用，页面卡死。

目前还没有好的办法去解决使用MutationObserver造成页面卡死这个问题。

所以这种水印只能做到防小人不防君子


  // 修改DOM重新调用水印

  function watchBody(){

    let hasBackgroundImage = document.getElementById('body').style

    if(hasBackgroundImage){

      waterMark()

    }

  }

  let observer;

  // 观察者

  function watchAtt(){

    observer = new MutationObserver(watchBody)

    const targetNode = document.getElementById('body')

    const setConfig = { attributes: true}

    observer.observe(targetNode, setConfig)

  }

  watchAtt()

  // 页面刷新

  window.onbeforeunload=function (){

    console.log(11111)

    observer.disconnect();

  }

完整代码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

</head>

<body id="body">

  <canvas id="canvasDom" ></canvas>

  <script>

    // 获取当前时间

    function curentTime(userName='张三'){

      let newTime = new Date();

      // 获取年

      let newYarn = newTime.getFullYear()

      // 获取月

      let newMonth = (newTime.getMonth() + 1) > 9 ? ( newTime.getMonth() + 1) : "0" + ( newTime.getMonth() + 1);

      // 获取时间

      let newDay = newTime.getDate() > 9 ? newTime.getDate() : "0"+date.getDate();

      return newYarn + '-' + newMonth +' -' + newDay + '-'+ userName

    }

![06.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/57dbc4ee8e0d4a42b345b0bd7dd56790~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1913&h=902&s=2562551&e=gif&f=60&b=fafafa)

    function waterMark(){

      // 获取dom节点

      let canvasDom=document.getElementById('canvasDom')

      // 设置canvas的大小

      canvasDom.width=1000

      canvasDom.height=560

      // canvas重叠部分隐藏

      canvasDom.style.display='none'

      // 获取canvs上下文

      const ctx= canvasDom.getContext('2d')

      //设置文字的大小 以及字体样式

      ctx.font = "30px Verdana"

      // 设置透明度

      ctx.fillStyle = 'rgba(0,0,0,.3)'

      // 设置倾斜度

      ctx.rotate(0.2)

      // 填充文字以及位置

      ctx.fillText(curentTime(), 30,150)

      // 将它转化为base64

      const img=canvasDom.toDataURL('image/png')

      let body = document.getElementById('body')

      body.setAttribute('style',`background-image:url("${img}")`)

    }

    waterMark()

    // 修改DOM重新调用水印

    function watchBody(){

      let hasBackgroundImage = document.getElementById('body').style

      if(hasBackgroundImage){

        waterMark()

      }

    }

    let observer;

    // 观察者

    function watchAtt(){

      observer = new MutationObserver(watchBody)

      const targetNode = document.getElementById('body')

      const setConfig = { attributes: true}

      observer.observe(targetNode, setConfig)

    }

    watchAtt()

    // 页面刷新

    window.onbeforeunload=function (){

      console.log(11111)

      observer.disconnect();

    }

  </script>

</body>

</html>

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

  1. 神奇的canvas——巧用 canvas 为图片添加水印

    代码地址如下:http://www.demodashi.com/demo/11637.html 很久之前写过一篇关于 canvas 的文章,是通过 canvas 来实现一个绚丽的动画效果,不管看过没看 ...

  2. 前端小程序——js+canvas 给图片添加水印

    市场上各种各样的图片处理器有很多,那么作为程序员的我们是不是应该自己做一个呢?那就从加水印开始吧 html: <canvas id="shuiyinTest"> < ...

  3. canvas添加水印

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

  4. 使用canvas给图片添加水印

    css部分 .clip { position: absolute; clip: rect(0 0 0 0); } html部分 <input type="file" id=& ...

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

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

  6. 微信小程序Canvas添加水印字体，通过setGlobalAlpha设置字体透明度。

    微信小程序自带的设置透明度只有setGlobalAlpha,但是CanvasContext.setGlobalAlpha设置透明度,是全局透明,整张图片都透明了.所以直接使用是不行的. 换种思路实现: ...

  7. C# 给PDF文件添加水印

      水印种类及功能介绍 PDF水印分为两种:文本水印和图片水印.文本水印一般被用在商业领域,提醒读者该文档是受版权保护的,其他人不能抄袭或者免费使用.除了这个特征,水印还可以用来标记这个文档 的一些基 ...

  8. Android 图片添加水印图片或者文字

    给图片添加水印的基本思路都是载入原图,添加文字或者载入水印图片,保存图片这三个部分 添加水印图片: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...

  9. 使用canvas进行图像编辑

    前面的话 本文将分为几个小功能的形式来详细介绍canvas图像编辑 缩放 下面是一张分析图,假设默认情况下,图片和canvas宽高相同.图片的缩放(scale)范围为0.5到3,缩放时改变的是图片的大 ...

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

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

随机推荐

  1. 火山引擎AB测试：广告实验深度打通巨量引擎，高效测试广告素材

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群   近期,火山引擎AB测试DataTester上线了新版的广告AB实验,还推出了与巨量引擎深度打通的能力.用户可以 ...

  2. 火山引擎DataLeap下Notebook 系列文章一：技术选型之路

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 Notebook 是一种支持 REPL 模式的开发环境.所谓「REPL」,即「读取-求值-输出」循环:输入一段代码 ...

  3. Kubernetes(K8S) 配置静态资源服务

    Kubernetes(K8S) 配置静态资源服务 --- apiVersion: v1 kind: ConfigMap metadata: name: img-config namespace: vi ...

  4. SpringBoot yml 小格子 变 小叶子

    SpringBoot yml 小格子 变 小叶子 一般添加十多个模块后会出现这样的情况,正常情况下,看POM 文件里的 spring 引用是否异常 一般把 idea 关了再打开试试,有几次我是关了再开 ...

  5. Flask依赖的核心模块werkzeug

    Flask的web框架实现 Flask是python Web框架,自然要遵 WSGI 规范,需要同时实现服务端程序+应用程序,并且要丰富完善请求和响应的处理. Flask自身并没有实现WSGI,而是依 ...

  6. 机器人多目标包围问题(MECA)新算法：基于关系图深度强化学习

    摘要:中科院自动化所蒲志强教授团队,提出一种基于关系图的深度强化学习方法,应用于多目标避碰包围问题(MECA),使用NOKOV度量动作捕捉系统获取多机器人位置信息,验证了方法的有效性和适应性.研究成果 ...

  7. 服务器上TIME_WAIT过多怎么处理

    正常情况下,TIME_WAIT是需要存在的 为了保证客户端发送的最后一个ACK报文能够到达服务器,因为这个ACK可能丢失,从而导致处在LAST-ACK状态的服务器收不到对FIN-ACK的确认报文,服务 ...

  8. AcWing 第 13 场周赛  补题记录

    比赛链接:Here AcWing 3811. 排列 签到题, 先输出 \(n\) 然后输出 \(1\sim n -1\) 即可 AcWing 3812. 机器人走迷宫 不会什么特别高级的方法 qaq, ...

  9. SpringCloud学习 系列六、服务平滑离线

    系列导航 SpringCloud学习 系列一. 前言-为什么要学习微服务 SpringCloud学习 系列二. 简介 SpringCloud学习 系列三. 创建一个没有使用springCloud的服务 ...

  10. .NET开源的简单、快速、强大的前后端分离后台权限管理系统

    前言 今天分享一款前端基于Vue3,后端基于.NET8开源的免费(MIT license).简单.快速.强大的前后端分离后台权限管理系统:中台Admin(Admin.Core). 项目官方介绍 中台A ...