使用canvas生成水印watermark，有详细注释，简单易懂

前端学狗

已于 2022-03-22 17:40:46 修改

阅读量4.6k

点赞数 7

分类专栏：总结记录前端实践文章标签： javascript 前端

于 2022-03-22 17:33:25 首次发布

本文链接：https://blog.csdn.net/weixin_44370837/article/details/123666313

版权

前端实践同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

总结记录

11 篇文章 0 订阅

订阅专栏

大家好，我是小梅，公众号：「小梅的前端之路」原创作者。

作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。

直接上代码，生成水印的js文件：

// const watermark = {}
// 定义设置水印的方法，
const watermarkFun = () => {
  // 如果水印元素已经存在就先移走，重新生成, id要是全局独一无二的
  const id = '3.14159261111'
  if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id))
  }
  // 第一步：生成cavas元素，使用canvas, 绘制水印
  const str = '我是水印ya'
  const canvasEle = document.createElement('canvas')
  // 设置单个水印元素的宽高，这决定了页面水印的密度，需要更具水印文字的大小以及长度设置合理的值
  canvasEle.width = 200
  canvasEle.height = 100
  const ctx = canvasEle.getContext('2d') // 绘制2d图形
  ctx.rotate(-20 * Math.PI / 180)// 设置水印元素的倾斜, 这一行代码要写在设置水印文字之前，涉及样式的都写在设置水印文字之前
  ctx.font = '16px serif' // 设置水印文字的大小和字体
  ctx.fillStyle = 'rgba(200, 200, 200, 0.8)' // 设置水印文字的颜色
  ctx.textAlign = 'left' // 文本左对齐
  ctx.fillText(str, canvasEle.width / 16, canvasEle.height / 2) // 设置水印文字

  // 第二步：把canvas转化为一张图片，作为背景图，添加到div
  const divEle = document.createElement('div')
  divEle.id = id
  divEle.style.width = document.documentElement.clientWidth - 10 + 'px' // 设置div元素的宽高
  divEle.style.height = document.documentElement.clientHeight - 20 + 'px'
  divEle.style.pointerEvents = 'none' // 元素永远不会成为鼠标事件的target
  divEle.style.position = 'fixed' // 固定定位, 让元素撑满整个可视区域
  divEle.style.top = '3px'
  divEle.style.left = '5px'
  divEle.style.background = 'url(' + canvasEle.toDataURL() + ') left top repeat' // 水印图片做div的背景,并且重复，这样看起来就是满屏都是水印
  divEle.style.zIndex = 999999 // 水印元素的权值设得大一些，以此来遮盖所有的元素
  // 第三步：div添加到body元素，水印生成
  document.body.appendChild(divEle)
  return id
}
// 设置水印，就调用这个方法
watermarkFun()
// 页面发生缩放，重绘水印
window.onresize = () => {
  watermarkFun()
}
// watermark.set = () => {
//   watermarkFun()
//   // 页面发生缩放，重绘水印
//   window.onresize = () => {
//     watermarkFun()
//   }
// }
// export default watermark

引用水印js的html文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
243254
<div style="margin-top: 200px; margin-left: 500px;">
  hhhsdf
  <button onclick="alert('do click')">dianji</button>
</div>
<script src="./test11.js"></script>
<!--<script type="module">-->
<!--import watermark from './test11.js';-->

<!--  console.log(123, watermark.set())-->
<!--</script>-->
</body>
</html>

页面效果图：

❤️欢迎素质三连[点赞 + 收藏 + 评论]

我是小梅，有兴趣的话可以在微信搜一搜「小梅的前端之路」第一时间接收文章更新通知，一起沟通、学习成长呀。

前端学狗

关注

7
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
使用canvas生成水印watermark，有详细注释，简单易懂

大家好，我是小梅，公众号：「小梅的前端之路」原创作者。作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。生成水印的js文件：// const watermark = {}// 定义设置水印的方法，const watermarkFun = () => { // 如果水印元素已经存在就先移走，重新生成, id要是全局独一无二的 const id = '3.14159261111' if (document.getEle..
复制链接

扫一扫