Vue+canvas實現(xiàn)水印功能

更新時間：2023年07月16日 10:27:27 作者：gnip

實際項目中偶爾會遇到給項目頁面背景加水印的需求,這篇文章主要為大家介紹了Vue使用canvas實現(xiàn)水印功能的示例代碼，希望對大家有所幫助

概述

實際項目中偶爾會遇到給項目頁面背景加水印的需求,最近正好遇到,借機(jī)自己動手實現(xiàn)了這個功能,這里記錄下實現(xiàn)思路和過程，支持文字和圖片作為背景水印。

最終效果

1.默認(rèn)樣式

2.自定義顏色、字體大小等

實現(xiàn)思路

首先不難想到的是,最終的水印文字重復(fù)平鋪到頁面背景上面,我們可以想到盒模型background屬性,然后設(shè)置其背景圖片為我們的文字即可.
其次如何讓給定的文本變成圖片呢?我們可以考慮使用canvas繪圖功能,根據(jù)給定的文字,生成canvas圖片,然后轉(zhuǎn)成base64格式,賦值給image標(biāo)簽不就可以了嘛,并且還能給文字設(shè)置不同的樣式,例如:加粗、顏色、背景、漸變、傾斜等等.
最后我們要做的就是將生成的背景圖片平鋪到頁面即可,切記不能影響頁面的布局,這里我們就可以考慮定位來實現(xiàn).

實現(xiàn)過程

這里我們采用vue+ts的方式，將水印封裝成組件

App.vue

<template>
  <div :class="['vite-app']">
    <watermark
      content="大家辛苦一下"
      :line-height="40"
      :rotate="-15"
      :fullscreen="true"
    >
      this is default text
      <ul>
        <li v-for="item in 5" :key="item">this is test content</li>
      </ul>
    </watermark>
     <div class="main-content">
      <ul>
        <li v-for="item in 60" :key="item">this is test content</li>
      </ul>
    </div>
  </div>
</template>
<script setup lang="ts">
import Watermark from "./components/Watermark.vue";
</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.vite-app {
  font-weight: bold;
  font-size: 20px;
}
</style>

./component/Watermark.vue

<template>
  <div
    :class="['water-mark', props.fullscreen ? 'water-mark-full-screen' : '']"
    ref="waterMarkContainer"
  >
    <slot></slot>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
const waterMarkContainer = ref<HTMLElement>();
//poprs屬性
export interface WarkMark {
  fullscreen?: boolean;
  fontSize?: number;
  lineHeight?: number;
  fontFamily?: string;
  color?: string;
  width?: number;
  height?: number;
  xOffset?: number;
  yOffset?: number;
  rotate?: number;
  imgSrc?: string;
  content: string;
}
//默認(rèn)值
const props = withDefaults(defineProps<WarkMark>(), {
  fontSize: 16,
  fontFamily: "宋體",
  color: "rgba(128, 128, 128, .5)",
  width: 250,
  height: 258,
  // height: 100,
  lineHeight: 16,
  xOffset: 10,
  yOffset: 28,
  rotate: 30,
});
function createWaterMark() {
  const canvas = document.createElement("canvas");
  canvas.height = props.height;
  canvas.width = props.width;
  const ctx = canvas.getContext("2d");
  let imageUrl = "";
  ctx!.rotate(props.rotate * (Math.PI / 180));
  ctx!.fillStyle = props.color;
  ctx!.font = `${props.fontSize}px ${props.fontFamily}`;
  const wrap = document.createElement("div");
  wrap.classList.add("mak-wrap");
  wrap.style.zIndex = "-1";
  if (props.imgSrc) {
  //圖片作為背景
    createImageWaterMark();
  } else {
  //文字作為背景
    createTextWaterMark();
  }
  function createDom() {
    wrap.style.backgroundImage =
      "url(" + imageUrl + ")," + "url(" + imageUrl + ")";
    wrap.style.backgroundPosition = `${props.width / 2}px ${
      props.height / 2
    }px, 0 0`;
    wrap.style.backgroundSize = props.width + "px";
    waterMarkContainer.value!.appendChild(wrap);
  }
  function createImageWaterMark() {
    const image = new Image();
    image.src = props.imgSrc!;
    image.width = props.width * 0.2;
    image.crossOrigin = "anonymous"; //允許圖片跨域訪問
    image.onload = () => {
      ctx!.drawImage(
        image,
        props.xOffset,
        props.xOffset + props.lineHeight + 10
      );
      imageUrl = canvas.toDataURL();
      canvas.style.opacity = ".5";
      createDom();
    };
  }
  function createTextWaterMark() {
    ctx!.fillText(
      props.content,
      props.xOffset,
      props.xOffset + props.lineHeight + 10
    );
    imageUrl = canvas.toDataURL();
    createDom();
  }
}
onMounted(() => {
  createWaterMark();
});
</script>
<style lang="less">
.water-mark {
  position: relative;
  pointer-events: none;
  .mak-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}
.water-mark.water-mark-full-screen {
  .mak-wrap {
    position: fixed;
  }
}
</style>