前端canvas如何實(shí)現(xiàn)水印

發(fā)布時間：2021-05-20 11:17:59 來源：億速云閱讀：652 作者：小新欄目：web開發(fā)

小編給大家分享一下前端canvas如何實(shí)現(xiàn)水印，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

兩種水印效果如圖：

原理解析：

圖一斜紋類：創(chuàng)建一個和頁面一樣大的畫布，根據(jù)頁面大小以及傾斜角度大致鋪滿水印文字，最后轉(zhuǎn)化為一張圖片設(shè)為背景
圖二傾斜類：將文字傾斜后轉(zhuǎn)化為圖片，然后設(shè)置背景圖片repeat填充整個頁面

代碼分析：

這里我只簡略分析圖一斜紋類，事實(shí)上這兩種方式都較為簡單，不需要特別強(qiáng)的canvas基礎(chǔ)，只需大概了解就行，直接上完整代碼吧

圖一

<!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個字，實(shí)際按需求來
      var cpyName = str;
      if (str.length > 16) {
        cpyName = str.substring(0, 16);
      }
      // 創(chuàng)建 canvas 元素
      var can = document.createElement('canvas');
      // 獲取 content 元素
      var report = $('.content')[0]
      // 將 canvas 元素添加到 content 中
      report.appendChild(can);
      // 設(shè)置 canvas頁面寬度，這里的 800 是因?yàn)槲宜舅∥募笮」潭?，可按需求更?
      can.width = 800;
      // 獲取整個body高度
      can.height = document.body.offsetHeight;
      // 隱藏 canvas 元素
      can.style.display = 'none';
      can.style.zIndex = '999'
      // 獲取 canvas 元素工具箱
      var cans = can.getContext('2d');
      // 設(shè)置文字傾斜角度為 -25 度以及樣式
      cans.rotate(-25 * Math.PI / 180);
      cans.font = "800 30px Microsoft JhengHei";
      cans.fillStyle = "#000";
      cans.textAlign = 'center';
      cans.textBaseline = 'Middle';
      // 動態(tài)改變字體大小
      if(cans.measureText(cpyName).width > 180) {
        var size = 180 / cpyName.length
        cans.font = '800 ' + size +'px '+ ' Microsoft JhengHei'
      }
      /* 
        雙重遍歷，
        當(dāng) 寬度小于頁面寬度時，
        當(dāng) 高度小于頁面高度時，
        這里的寬高可以適當(dāng)寫大，目的是為了讓水印文字鋪滿
       */
      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 轉(zhuǎn)化為圖片并且設(shè)置為背景
      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>

以上是“前端canvas如何實(shí)現(xiàn)水印”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

前端canvas如何實(shí)現(xiàn)水印

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽