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. LiteOS内核源码分析：静态内存Static Memory

    摘要:本文带领大家一起剖析了LiteOS静态内存模块的源代码,包含静态内存的结构体.静态内存池初始化.静态内存申请.释放.清除内容等. 内存管理模块管理系统的内存资源,它是操作系统的核心模块之一,主要 ...

  2. 在openGauss上做开发？这个大赛拿出30万寻找开源的你

    摘要:信创"大比武"鲲鹏基础软件开发赛道,面向openGauss设置2个赛题,将推进openGauss人才建设,加快openGauss"产学研用"人才培养. 多 ...

  3. 一文讲清楚FusionInsight MRS CDL如何使用

    摘要:CDL是一种简单.高效的数据实时集成服务,能够从各种OLTP数据库中抓取Data Change事件,然后推送至Kafka中,最后由Sink Connector消费Topic中的数据并导入到大数据 ...

  4. 总结MySQL 的一些知识点：MySQL 连接的使用

    MySQL 连接的使用 在前几章节中,我们已经学会了如何在一张表中读取数据,这是相对简单的,但是在真正的应用中经常需要从多个数据表中读取数据. 本章节我们将向大家介绍如何使用 MySQL 的 JOIN ...

  5. Jmeter对各种接口类型的测试

    JMeter对各种类型接口的测试 默认做接口测试前,已经给出明确的接口文档(如,http://test.nnzhp.cn/wiki/index.php?doc-view-59):本地配好了JMeter ...

  6. let、var、const区别

    1.var:传统的变量声明方式 在ES5及之前的JavaScript版本中,我们通常使用var关键字声明变量.var具有以下特点: 函数作用域:变量的作用域限制在声明的函数内部,如果在函数外部访问,将 ...

  7. 解决延迟有 Wi-Fi 6 就够了！

    最近二狗子家里的路由器坏了,而家里的数据网络信号又非常差,失去了路由器基本上就等于和世界隔离,所以二狗子打算去附近商城随便买一个新的路由器,结果售货员张口就问:"买 Wi-Fi 6 的路由器 ...

  8. 【QT Tools】软件多语言国际化翻译的方法与步骤

    在Qt的项目开发过程中,有时软件要翻译成多语言版本,这就涉及到国际化方面的操作.虽然Qt对这方面集成了很多工具,操作起来比较方便,本文还是总结一下国际化的方法和步骤,用以备忘和参考. 我们通常在写程序 ...

  9. 无需修改代码，用 fcapp.run 运行你的 REST 应用

    作者 | 阿里云 Serverless 技术研发 落语 背景 阿里云函数计算产品在较早的时候支持了HTTP触发器能力,支持用户使用 HTTP 协议进行函数调用.函数计算后端通过一个共享的 APISer ...

  10. SD协议-时序02

    SD Bus PAD internal card clock - 对于SD card来讲,时钟信号是一个输入 Data0-3 - inout类型,既可能是输入,又可能是输出 对于Data0-3输出的时 ...