warterMark.js 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. let watermark = {}
  2. let setWatermark = (str) => {
  3. let id = '1.23452384164.123412415'
  4. if (document.getElementById(id) !== null) {
  5. document.body.removeChild(document.getElementById(id))
  6. }
  7. let can = document.createElement('canvas')
  8. can.width = 300
  9. can.height = 300
  10. let cans = can.getContext('2d')
  11. cans.rotate(-20 * Math.PI / 180)
  12. cans.font = '20px Vedana'
  13. cans.fillStyle = 'rgba(200, 200, 200, 0.40)'
  14. cans.textAlign = 'left'
  15. cans.textBaseline = 'Middle'
  16. cans.fillText(str, can.width / 3, can.height / 2)
  17. let div = document.createElement('div')
  18. div.id = id
  19. div.style.pointerEvents = 'none'
  20. div.style.top = '70px'
  21. div.style.left = '100px'
  22. div.style.position = 'fixed'
  23. div.style.zIndex = '100000'
  24. div.style.width = document.documentElement.clientWidth - 100 + 'px'
  25. div.style.height = document.documentElement.clientHeight - 100 + 'px'
  26. div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
  27. document.body.appendChild(div)
  28. return id
  29. }
  30. // 该方法只允许调用一次
  31. watermark.set = (str) => {
  32. let id = setWatermark(str)
  33. setInterval(() => {
  34. if (document.getElementById(id) === null) {
  35. id = setWatermark(str)
  36. }
  37. }, 500)
  38. window.onresize = () => {
  39. setWatermark(str)
  40. }
  41. }
  42. const outWatermark = (id) => {
  43. if (document.getElementById(id) !== null) {
  44. const div = document.getElementById(id)
  45. div.style.display = 'none'
  46. }
  47. }
  48. watermark.out = () => {
  49. const str = '7.432756475.689573874'
  50. outWatermark(str)
  51. }
  52. export default watermark