前言

水印作為保護智慧財產權的手段之一，在我們的日常生活中已經隨處可見，比如度娘圖片、ZF官網報表和隨處可見的海報等。水印距離我們的生活如此之近，作為相親交友原始碼開發人員，前端如何實現水印功能的呢。

正文

水印的生成手段無外乎兩種：程式合成和PS。從嚴格意義上來講，PS也是程式合成的手段之一（圖層合成），本文重點介紹如何使用程式合成手段在相親交友原始碼前端新增水印。

1 水印合成的分類

這裡只闡述和本文內容相關的分類，其他角度分類請自行度娘！
從素材來源分類：圖圖合成、圖文合成以及無圖合成。
從前端技術手段上：canvas、div遮罩和直接設定背景圖片。

2 水印前端合成技術詳述

由於直接在相親交友原始碼中設定背景圖片過於簡單，本節僅詳述canvas和div遮罩實現圖圖合成、圖文合成以及無圖合成的原理。

2.1 canvas水印合成原理

利用canvas相關api：drawImage、toDataURL和fillText。drawImage可以將圖片繪製到canvas，toDataURL則可以將canvas轉變為base64圖片，fillText可以向圖片中新增文字。

示例程式碼如下：

async function compseImages(image1, image2){
  return new Promise((resolve, reject) => {
      const canvas = document.createElement("canvas");
      canvas.width = 700;
      canvas.height = 700;
      const context = canvas.getContext("2d");
      context.rect(0 , 0 , canvas.width , canvas.height);
      context.fillStyle = "#fff";
      context.fill();
      const myImage = new Image();
      myImage.src = image1;  //背景圖片
      myImage.crossOrigin = 'Anonymous';
      myImage.onerror = (e) => { reject(e)}
      myImage.onload = () => {
        context.drawImage(myImage , 0 , 0 , 700 , 700);
        context.font = "60px Courier New";
        context.fillText("我是文字",350,450);
        var myImage2 = new Image();
        myImage2.src = image2;  //你自己本地的圖片或者線上圖片
        myImage2.crossOrigin = 'Anonymous';
        myImage2.onerror = (e) => { reject(e) }
        myImage2.onload = () => {
          context.drawImage(myImage2 , 175 , 175 , 225 , 225);
          resolve(canvas.toDataURL("image/jpeg"));
        }
      }
  })
  }

上面程式碼僅僅合併了2副影像，並新增了一段文字。實現水印效果相信對於相親交友原始碼開發童鞋應該不是什麼難事！

2.2 div遮罩水印合成原理

這種方案適合相親交友原始碼中圖文合成以及無圖合成。兩種具體實施方案：普通div和shadowDom。建議使用shadowDom，可以進行樣式封裝。目前外部樣式只能通過宿主元素設定可繼承屬性加以干擾。總之，在規範相親交友原始碼設定全域性樣式的前提下，可以放心使用shadowDom，不用擔心樣式汙染！

使用shadowDom設定水印的示例程式碼如下：

// index.html
<div class="content">
  <div id="watermark" style="pointer-events: none!important"></div>
</div>
<script>
   const ele = document.querySelector('#watermark')
   if (typeof ele .attachShadow === 'function') { // 如果元素支援建立shadowRoot則建立否則用普通div
       shadowRoot = ele .attachShadow({ mode: 'open' })
   } else {
       shadowRoot = ele 
   }
   const textEl = document.createElement('div')
   const textNode = document.createTextNode('水印')
   textEl.append(textNode)
   textEl.style.width='200px'
   textEl.style.height='200px'
   textEl.style.fontSize='20px'
   textEl.style.opacity='0.5'
   textEl.style.transform='rotate(-15deg)'
   textEl.style['user-slect']='none'
   shadowRoot.append(textEl)
</script>

上面程式碼僅新增了一個水印，新增有規律或者無規律水印需要在迴圈中處理，水印行列需要根據父級元素區域和水印寬高進行計算，從而達到鋪滿全屏的效果。

3 結果評估

利用相親交友原始碼前端技術手段生成的水印，比較容易被擦除，比如刪除背景圖或者刪除dom節點。還是採用PDF或者圖片的方式進行相親交友原始碼內容展現才能最大可能的避免侵權！

本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理
原文連結：

相親交友原始碼開發，前端如何實現水印功能？

前言

正文

相關文章