前端canvas水印快速制作教程_F11 - 专业站长和开发者的学习网站

分享到

前端canvas水印快速制作教程

html5 来源：互联网搜集作者：秩名发布时间：2019-09-19 23:15:39 人浏览

摘要

两种水印效果如图：原理解析：图一斜纹类：创建一个和页面一样大的画布，根据页面大小以及倾斜角度大致铺满水印文字，最后转化为一张图片设为背景图二倾斜类：将文字倾斜后转化为图片，然后设置背景图片repeat填充整个页面代码分析：这里我只简略分析图

两种水印效果如图：

原理解析：

图一斜纹类：创建一个和页面一样大的画布，根据页面大小以及倾斜角度大致铺满水印文字，最后转化为一张图片设为背景
图二倾斜类：将文字倾斜后转化为图片，然后设置背景图片repeat填充整个页面

代码分析：

这里我只简略分析图一斜纹类，事实上这两种方式都较为简单，不需要特别强的canvas基础，只需大概了解就行，直接上完整代码吧

图一

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .water {
      width: 100vw;
      height: 2000px;
      position: absolute;
      top: 0;
      left: 0;
      background-repeat: no-repeat;
    }
    .content {
      width: 800px;
      height: 2000px;
      margin-left: auto;
      margin-right: auto;
      background: cadetblue;
      overflow: hidden;
       
    }
  </style>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
  <div class="content">
    <div class="water"></div>
  </div>
   
  <script>
    function addWaterMarker(str) {
      // 这里限制了不超过15个字，实际按需求来
      var cpyName = str;
      if (str.length > 16) {
        cpyName = str.substring(0, 16);
      }
      // 创建 canvas 元素
      var can = document.createElement('canvas');
      // 获取 content 元素
      var report = $('.content')[0]
      // 将 canvas 元素添加到 content 中
      report.appendChild(can);
      // 设置 canvas页面宽度，这里的 800 是因为我司水印文件大小固定，可按需求更改
      can.width = 800;
      // 获取整个body高度
      can.height = document.body.offsetHeight;
      // 隐藏 canvas 元素
      can.style.display = 'none';
      can.style.zIndex = '999'
      // 获取 canvas 元素工具箱
      var cans = can.getContext('2d');
      // 设置文字倾斜角度为 -25 度以及样式
      cans.rotate(-25 * Math.PI / 180);
      cans.font = "800 30px Microsoft JhengHei";
      cans.fillStyle = "#000";
      cans.textAlign = 'center';
      cans.textBaseline = 'Middle';
      // 动态改变字体大小
      if(cans.measureText(cpyName).width > 180) {
        var size = 180 / cpyName.length
        cans.font = '800 ' + size +'px '+ ' Microsoft JhengHei'
      }
      /* 
        双重遍历，
        当 宽度小于页面宽度时，
        当 高度小于页面高度时，
        这里的宽高可以适当写大，目的是为了让水印文字铺满
       */
      for(let i = (document.body.offsetHeight*0.5)*-1; i<800; i+=160) {
        for(let j = 0; j<document.body.offsetHeight*1.5; j+=60) {
          // 填充文字，x 间距, y 间距
          cans.fillText(cpyName, i, j)
        }
      }
      // 将 canvas 转化为图片并且设置为背景
      report.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
    }
    addWaterMarker('测试水印');
  </script>
</body>
 
</html>

图二

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .water {
      width: 100vw;
      height: 2000px;
      position: absolute;
      top: 0;
      left: 0;
      background-repeat: no-repeat;
    }
    .content {
      width: 800px;
      height: 2000px;
      margin-left: auto;
      margin-right: auto;
      background: cadetblue;
      overflow: hidden;
    }
  </style>
</head>
<body>
    <div class="content">
      <div class="water"></div>
    </div>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  <script>
    // 添加水印方法
    function addWaterMarker(str) {
      var cpyName = str;
      if (str.length > 16) {
        cpyName = str.substring(0, 16);
      }
      var can = document.createElement('canvas');
      var report = $('.content')[0];
      report.appendChild(can);
      can.width = 180;
      can.height = 110;
      can.style.display = 'none';
      can.style.zIndex = '999'
 
      var cans = can.getContext('2d');
      cans.rotate(-25 * Math.PI / 180);
      cans.font = "800 30px Microsoft JhengHei";
      cans.fillStyle = "#000";
      cans.textAlign = 'center';
      cans.textBaseline = 'Middle';
      if(cans.measureText(cpyName).width > 180) {
        var size = 180 / cpyName.length
        cans.font = '800 ' + size +'px '+ ' Microsoft JhengHei'
      }
      cans.fillText(cpyName, 60, 100);
      report.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
    }
    addWaterMarker('测试水印');
  </script>
</body>
</html>

您可能感兴趣的文章 :

原文链接 : https://www.jb51.net/html5/693983.html

Tag : 前端(15)Canvas(62)水印(11)

html5+实现plus.io进行拍照和图片等获取

使用Hbuilder开发工具开发：实现可对Android机进行控制和获取资源说明：IO模块管理本地文件系统，用于对文件系统的目录浏览、文件的读取
HTML标签实现带动画的抖音LOGO效果

先上结果，最终实现效果如下：还原度应该还可以吧？抖音Logo结构想要用CSS来画抖音的Logo，前提要先了解它的构造，一定是一些几何图形
video.js支持m3u8格式直播的实现教程

为什么要使用video.js？ 1. PC端浏览器并不支持video直接播放m3u8格式的视频 2. 手机端各式各样的浏览器定制的video界面风格不统一，直接写原生
html5调用摄像头截图功能的介绍

关于html5调用音视频等多媒体硬件的API已经很成熟，不过一直找不到机会把这些硬件转化为实际的应用场景，不过近年来随着iot和AI的浪潮，
前端监听websocket消息并实时弹出的代码实例介绍

本文默认您已掌握react生态开发的相关技术，并熟练应用umiJS的原则上，请继续！项目需求： 1、服务侧推送给消息给前端，前端需要展示在
HTML5新增内容和API介绍

classList 属性该属性用于在元素中添加，移除及切换 CSS 类。 classList属性返回元素的类名，作为 DOMTokenList 对象： div id=div class=test1 test2clas
使用canvas仿Echarts实现金字塔图的教程

最近公司项目都偏向于数字化大屏展示????，而这次发给我的项目原型中出现了一个金字塔图?????，好巧不巧，由于我们的图表都是使用Ech
基于HTML十秒做出淘宝页面的方法

十秒钟做出一个网页，可能大家看完会觉得有点标题党，其实不然，把别人的抠过来还是可以的比如我这次先把淘宝的网页扣过来为例第一
HTML5+CSS+JavaScript实现捉虫小游戏的代码

捉虫小游戏首页展示：选择昆虫：效果展示：有密集恐惧症的别玩哟、游戏永远不会停止一直玩项目源码结构：图片和js以及css等基础
Canvas绘制像素风图片的代码

童年玩红白机。尤其国内的小霸王那段时光还记得么。那个马里奥大叔还记得么。因为特别喜欢像素风的游戏从小到大一直都是，像素风本