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. 输入的查询SQL语句，是如何执行的？

    摘要:输入一条语句,返回一个结果,却不知道这条语句在 MySQL 内部的执行过程. 本文分享自华为云社区<一条查询SQL是如何执行的>,作者: 共饮一杯无 . 执行如下SQL,我们看到的只 ...

  3. 火山引擎 DataTester 背后，抖音的名字原来是 AB 测试来的

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 抖音的名字是怎么来的? 在字节跳动火山引擎技术开放日上,字节跳动副总裁杨震原曾透露过"抖音"名 ...

  4. 数字U家，即刻出发！2022联合利华黑客马拉松启动！

    2022联合利华黑客马拉松火热报名倒计时! 欢迎各领域的个人及组织团队参与 人工智能.数据挖掘.市场规模预测.原材料与包装风险控制.AR/VR.低碳.消费者偏好研究等超多创新赛题,任选其一. 作为快消 ...

  5. 活动回顾｜阿里云 Serverless 技术实战与创新成都站回放&PPT下载

    7月29日"阿里云 Serverless 技术实战与创新"成都站圆满落幕.活动受众以关注 Serverless 技术的开发者.企业决策人.云原生领域创业者为主,活动形式为演讲.动手 ...

  6. SAE 最佳实践范本：助力视野数科进入云原生“快车道”

    阿里云生态金融科技行业标杆 -- ​ 2021 年,云原生的商业价值正在被加速释放. ​ 一个公认的事实是,Serverless 是当下云原生方向内绝对的亮点.可以看作,它的出现,让企业用户真正地免除 ...

  7. java调用百度地图接口输入名称查经度纬度

    如何注册ak号请参考https://blog.csdn.net/weixin_42512684/article/details/115843299 package manager.tool; impo ...

  8. Java虚拟机——类加载器深入剖析

    一.java虚拟机与程序的生命周期 在如下几种情况下,java虚拟机将结束生命周期: 1.执行了System.exit()方法 2.程序正常执行结束 3.程序在执行过程中遇到了异常或错误而异常终止 4 ...

  9. Qt做大型软件开发技术选型Part2:Qt调用C#编写的COM组件

    Qt做大型软件开发技术选型Part2:Qt调用C#编写的COM组件 之前有提到过我们项目部现在正在用Qt重构一个大型软件,现在的情景是这样的: 原先的软件是通过一个C++(CLR)的主程序,调用各种用 ...

  10. 大数相乘 a*b

    //zznu 1562//用数组模拟乘法计算的过程 #include<iostream> #include<stdio.h> #include<string.h> ...