海豚水印接入文档

核心代码

图片合成模块watermark.js

// 获取字符串长度
const getTxtwidth = (str) => {
  // 创建一个画布
  const canStr = document.createElement('canvas')
  // 设置画布的长宽
  canStr.width = 500
  canStr.height = 300
  const canStrs = canStr.getContext('2d')
  canStrs.font = 'lighter 15px PingFangSC'
  return canStrs.measureText(str).width
}
// 合成背景图
const setWatermark = (str, roatev, xPadding, yPadding) => {
    // 参数说明 str为水印字符串,roatev为旋转角度,xPadding为横向间距,yPadding为纵向
  const txtWidth = getTxtwidth(str)
  const can = document.createElement('canvas')
  // 设置画布的长宽
  can.width = txtWidth * Math.cos(roatev * Math.PI / 180) + xPadding
  can.height = txtWidth * Math.sin(roatev * Math.PI / 180) + yPadding
  const cans = can.getContext('2d')
  // 旋转角度
  cans.rotate(-roatev * Math.PI / 180)
  cans.font = 'lighter 15px PingFangSC'
  // 设置填充绘画的颜色、渐变或者模式
  cans.fillStyle = 'rgba(220, 223, 230, 0.5)'
  // 设置文本内容的当前对齐方式
  cans.textAlign = 'left'
  // 设置在绘制文本时使用的当前文本基线
  cans.textBaseline = 'Middle'
  // 在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
  cans.fillText(str, 0, can.height)
  return 'url(' + can.toDataURL('image/png') + ') left top repeat'
}
export default setWatermark

使用方法：

（1）安装模块

npm install dolphin-watermark --save

（2）在登录入口引入setWatermark模块并调用

import setWatermark from 'dolphin-watermark'

例如：此处在登录成功之后调用合成模块并将图片存入浏览器缓存中

和UI沟通如下默认参数，后续有需要可以根据需求调整

{
  roatev: 15,
  xPadding: 100,
  yPadding: 100
}

（3）在需要水印的组件外层设置动态背景属性并修改内容背景色为透明

例如：在vue中使用实现如下效果

data(){
    return {
        waterMark: {
        background: localStorage.getItem('watermark')
      } 
  }
}
<el-table :style="waterMark"></el-table>
<style>
.el-table tr {
  background: transparent;
}
</style>
// 部分组件可以修改组件库全局样式覆盖。例如elment-ui table组件可以直接修改覆盖样式文件统一修改