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. GaussDB(DWS)发生数据倾斜不要慌，一文教你轻松获取表倾斜率

    摘要:GaussDB(DWS)是MPP并行架构,若表的数据存在倾斜情况,会引起一系列性能问题,影响用户体验,严重时可能会引起系统故障.因此能快速获取倾斜的表并整改是GaussDB(DWS)运维管理人员 ...

  2. 如何快速从 ETL 到 ELT？火山引擎 ByteHouse 做了这三件事

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 前言 当涉及到企业分析场景时,所使用的数据通常源自多样的业务数据,这些数据系统大多采用以行为主的存储结构,比如支付 ...

  3. 火山引擎 DataLeap 推出全链路智能监控报警平台

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 随着大数据开发场景下需要运维管理的任务越来越多,在日常运维中开发者经常会面临以下几个问题: 任务多,依赖关系复杂: ...

  4. Solon2 的 Bean 生命周期

    Solon 框架的 Bean 是被容器托管的,所以它的生命周期只限定在容器内部: 时机点 说明 补充 AopContext::new() 是在应用初始化时执行 ::new() AopContext:: ...

  5. Solon2 开发之IoC，十、Bean 在容器的两层信息

    1.剖析 Bean 的装包与注册过程 比如,用配置器装配一个 Bean (本质是装配出一个 BeanWrap,并自动注册到容器): @Configuration public class Config ...

  6. Go--连接mysql，增删改查

    下载驱动库,下为官方推荐的,还有其他ORM库,暂时没涉及,故本文不做阐述 go get -u github.com/go-sql-driver/mysql 一.连接 1.1 直接连接,查询单行 pac ...

  7. nginx: [emerg] duplicate upstream "test2" in /usr/local/nginx/conf/sites-enabled/test2.conf:1

    使用/usr/local/nginx/sbin/nginx -t 检查nginx配置文件时报错: nginx: [emerg] duplicate upstream "test2" ...

  8. 使用 std::string_view 提升字符串处理性能

    C++标准库提供了一个非常优秀的字符串处理类std::string,我们可以通过该类完成各种字符串操作.但是std::string有一个缺点,它的很多操作都是针对字符串实体,存在不必要的内存拷贝的代码 ...

  9. 【库函数】在什么时候使用 string_view 代替 string

    前言 C++17增加了std::string_view,它在很多情况会优于使用std::string . 尤其是用做函数形参的时候,使用std::string_view基本一定优于老式的const s ...

  10. vivo 商城前端架构升级—前后端分离篇

    本文主要以 vivo 商城项目的前后端分离经验,总结前后端分离思路,整理前后端分离方案,以及分离过程中遇到的问题及解决方案. 一.前言 vivo官方商城在2015年创建网上商城,开辟网络销售渠道,几年 ...