vue網頁添加水印

水印添加方式：1.新建 waterMark.js 內容以下

let watermarkOption = {} let setWatermarkContent = (content) => { let id = '1.23452384164.123412415'
 
  if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)) } let ele = document.createElement('canvas') ele.width = 250 ele.height = 150 let getCanvas = ele.getContext('2d') getCanvas.rotate(-20 * Math.PI / 180) getCanvas.font = '20px Vedana' getCanvas.fillStyle = 'rgba(200, 200, 200, 0.20)' getCanvas.textAlign = 'center' getCanvas.textBaseline = 'Middle' getCanvas.fillText(content, ele.width / 3, ele.height / 2) let div = document.createElement('div') div.id = id div.style.pointerEvents = 'none' div.style.top = '0px'    // 水印距離 上邊的距離
  div.style.left = '0px'  // 水印距離 左邊的距離
  div.style.position = 'fixed' div.style.zIndex = '100000' div.style.width = document.documentElement.clientWidth - 100 + 'px'    // 生成水印畫布大小的寬度
  div.style.height = document.documentElement.clientHeight - 100 + 'px'  // 生成水印畫布大小的高度
  div.style.background = 'url(' + ele.toDataURL('image/png') + ') left top repeat' document.body.appendChild(div) return id } // 該方法只容許調用一次
watermarkOption.set = (content) => { let id = setWatermarkContent(content) setInterval(() => { if (document.getElementById(id) === null) { id = setWatermarkContent(content) } }, 500) window.onresize = () => { setWatermarkContent(content) } } export default watermarkOption

2.在入口app引入

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script> import waterMark from './untils/waterMark' export default { name: 'App', data(){ return { } }, mounted(){ // 你要的內容
    waterMark.set("水印測試") }, methods:{ } } </script>

<style>

</style>