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. 消除数据孤岛，华为云DRS让一汽红旗ERP系统数据活起来

    摘要:拒绝延时,华为云DRS实现一汽红旗ERP系统数据实时同步. 本文分享自华为云社区<消除数据孤岛,华为云DRS让一汽红旗ERP系统数据活起来>,原文作者:心机胖. 数字化时代,数据成为 ...

  2. webpack原理(3)：Tapable源码分析及钩子函数作用分析

    webpack本质上是一种事件流的机制,它的工作流程就是将各个插件串联起来,而实现这一切的核心就是Tapable,webpack中最核心的负责编译的Compiler和负责创建bundles的Compi ...

  3. Flutter加固原理及加密处理

    ​ 引言 为了保护Flutter应用免受潜在的漏洞和攻击威胁,加固是必不可少的措施之一.Flutter加固原理主要包括代码混淆.数据加密.安全存储.反调试与反分析.动态加载和安全通信等多个方面.通过综 ...

  4. Windows 2016 安装 Jenkins

    Docker Jenkins 安装配置 Windows 2016 安装 Jenkins Jenkins + SVN Jenkins + SVN/Git + Maven + Docker + 阿里云镜像 ...

  5. Mac 安装 cnpm

    npm set registry https://registry.npm.taobao.org npm set disturl https://npm.taobao.org/dist npm cac ...

  6. 干掉大小流切换 I 帧！阿里云 RTC QoS 及视频编码联合优化之切流编码

    如果要在两条分辨率不同的视频流之间切换,尽管这两条流的画面内容基本一样,但是由于两条流的参考帧不同,分辨率不同,目前所有的视频编码标准都无法做到利用帧间预测编码得到编解码匹配的结果,而帧内预测编码即 ...

  7. Java Kafka 消费积压监控

    Java Kafka 消费积压监控 后端代码: Monitor.java代码: package com.suncreate.kafkaConsumerMonitor.service; import c ...

  8. js import的几种用法

    最近昨天公司小朋友离职,临时接收其负责的vue前端项目.vue好久没做了,很多东西都忘记或以前也没接触,几天开始慢慢写点vue的小知识,算是历程或备忘吧. import在js.ts中用了不知多少次,但 ...

  9. OS | 进程和线程基础知识全家桶图文详解✨

    前言 先来看看一则小故事 我们写好的一行行代码,为了让其工作起来,我们还得把它送进城(进程)里,那既然进了城里,那肯定不能胡作非为了. 城里人有城里人的规矩,城中有个专门管辖你们的城管(操作系统),人 ...

  10. Codeforces 1312B Bogosort （逆序证明）

    Example input 3 1 7 4 1 1 3 5 6 3 2 1 5 6 4 output 7 1 5 1 3 2 4 6 1 3 5 看题的时候发现和sort有关,但一定要逆序排序 证明: ...