vue轻松实现水印效果

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

let watermark = {}

let setWatermark = (text, sourceBody) => {

  let id = Math.random()*10000+'-'+Math.random()*10000+'/'+Math.random()*10000

  if (document.getElementById(id) !== null) {

    document.body.removeChild(document.getElementById(id))

  }

  let can = document.createElement('canvas')

  can.width = 150

  can.height = 120

  let cans = can.getContext('2d')

  cans.rotate(-20 * Math.PI / 180)

  cans.font = '15px Vedana'

  cans.fillStyle = 'rgba(0, 0, 0, .5)'

  cans.textAlign = 'left'

  cans.textBaseline = 'Middle'

  cans.fillText(text, can.width / 20, can.height )

  let water_div = document.createElement('div')

  water_div.id = id

  water_div.style.pointerEvents = 'none'

  water_div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'

  if(sourceBody){

    water_div.style.width = '100%'

    water_div.style.height = '100%'

    sourceBody.appendChild(water_div)

  }else{

    water_div.style.top = '3px'

    water_div.style.left = '0px'

    water_div.style.position = 'fixed'

    water_div.style.zIndex = '100000'

    water_div.style.width = document.documentElement.clientWidth  + 'px'

    water_div.style.height = document.documentElement.clientHeight  + 'px'

    document.body.appendChild(water_div)

  }

  return id

}

/**

 *  该方法只允许调用一次

 *  @param:

 *  @text == 水印内容

 *  @sourceBody == 水印添加在哪里，不传就是body

 * */

watermark.set = (text, sourceBody) => {

  let id = setWatermark(text, sourceBody)

  setInterval(() => {

    if (document.getElementById(id) === null) {

      id = setWatermark(text, sourceBody)

    }

  }, 2000)

  window.onresize = () => {

    setWatermark(text, sourceBody)

  }

}

export default watermark

1

2

3

// 水印

import watermark from './utils/watermark.js'

Vue.prototype.$watermark = watermark

1

this.$watermark.set("浩星2731")

1

2

3

4

5

<el-button @click="addWatermark">点我添加水印</el-button>

<div ref="content" style="width: 500px;height: 500px;border: 1px solid #ccc;">

 addWatermark(){

      this.$watermark.set("浩星2731",this.$refs.content)

    }

1

2

can.width = 150

can.height = 120