Echarts添加水印

如果直接说水印,很难在官方找到一些痕迹,但是换个词【纹理】就能找到了。水印就是一种特殊的纹理背景。

Echarts-backgroundColor

backgroundColor

支持使用rgb(255,255,255)rgba(255,255,255,1)#fff等方式设置为纯色,也支持设置为渐变色和纹理填充,具体见option.color

color

支持的颜色格式:

  • 使用 RGB 表示颜色,比如 'rgb(128, 128, 128)',如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)',也可以使用十六进制格式,比如 '#ccc'

  • 渐变色或者纹理填充

    yaml 复制代码
    // 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置
    {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
          offset: 0, color: 'red' // 0% 处的颜色
      }, {
          offset: 1, color: 'blue' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    }
    // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变
    {
      type: 'radial',
      x: 0.5,
      y: 0.5,
      r: 0.5,
      colorStops: [{
          offset: 0, color: 'red' // 0% 处的颜色
      }, {
          offset: 1, color: 'blue' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    }
    // 纹理填充
    {
      image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串
      repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'
    }

水印

通过一个新的canvas绘制水印,然后在backgroundColor中添加

js 复制代码
const waterMarkText = 'YJFicon'; // 水印
const canvas = document.createElement('canvas'); // 绘制水印的canvas
const ctx = canvas.getContext('2d');
canvas.width = canvas.height = 100; // canvas大小
ctx.textAlign = 'center'; // 文字水平对齐
ctx.textBaseline = 'middle'; // 文字对齐方式
ctx.globalAlpha = 0.08; // 透明度
ctx.font = '20px Microsoft Yahei'; // 文字格式 style size family
ctx.translate(50, 50); // 偏移
ctx.rotate(-Math.PI / 4); // 旋转
ctx.fillText(waterMarkText, 0, 0); // 绘制水印

option = {
    ...
    backgroundColor: {//在背景属性中添加
        // type: 'pattern',
        image: canvas,
        repeat: 'repeat'
    }
    ...
}

如果只想在 toolbox.saveAsImage 下载的图片才展示水印,toolbox.feature.saveAsImage 支持配置backgroundColor,将其设置为水印【纹理】即可

js 复制代码
option = {
    ...
    toolbox: {
        show: true,
        feature: {
            ...
            saveAsImage: {
                type: 'png',
                backgroundColor: {
                  // type: 'pattern',
                  image: canvas,
                  repeat: 'repeat'
                }
            }
        }
    }
    ...
}

最初想象

预研

通过源码可以知道 saveAsImage 的实现也是通过内置 API getConnectedDataURL 获取url(base64格式),然后赋值到 a 标签上(带download属性)实现下载。

思路

可以通过扩展此方法,先获取原始的图片url,基于这个图片重新绘制一个canvas,然后在这个基础上覆盖水印,最后将canvas再次转成url返回。

  • echartsInstance._api.getConnectedDataURL
  • echartsInstance.__proto__.getConnectedDataURL

含有两处实例方法需要处理。

结果

  • ✅可以拦截默认行为获取到添加水印后的图片url
  • ❌通过原api方法获取到url后绘制到新的canvas,涉及到异步处理(img标签需要等待load),由于 saveAsImage 调用 getConnectedDataURL 获取url是同步过程,因此无法正确读取到异步处理完的最终url,导致下载失败;不过,手动调用实例getConnectedDataURL 可以使用,需要配置Promise语法使用。

伪代码:

js 复制代码
const originGetConnectedDataURL = echartsInstance._api.getConnectedDataURL
echartsInstance._api.getConnectedDataURL = async function () {
    const origin = originGetConnectedDataURL.call(echartsInstance, ...arguments)
    const result = await toWaterUrl(origin)
    return result
}

function toWaterUrl (url) {
    return new Promise(resolve => {
        const img = new Image()
        img.src = url + '?v=' + Math.random();
        img.setAttribute('crossOrigin', 'Anonymous');
        img.onload = function() {
            // drawCanvas img 转 canvas
            // afterWater canvas 绘制水印
            resolve(afterWater(drawCanvas(img))
        }
    })
}
相关推荐
AIoT科技物语1 天前
免费,基于React + ECharts 国产开源 IoT 物联网 Web 可视化数据大屏
前端·物联网·react.js·开源·echarts
橙某人1 天前
📊基于Vue对Echarts5进行基础封装-按需引入
前端·vue.js·echarts
摇头的金丝猴2 天前
uniapp vue3 使用echarts-gl 绘画3d图表
前端·uni-app·echarts
暴富的im2 天前
Vue中使用echarts生成地图步骤详解
javascript·vue.js·echarts
麦麦大数据3 天前
vue+django+neo4j航班智能问答知识图谱可视化系统
django·vue·echarts·neo4j·智能问答·ltp·航班
莫问alicia4 天前
echarts 实现3D饼状图 加 label标签显示
前端·3d·echarts·swift
左&耳6 天前
echarts-for-react和echarts连用实现地图下钻,上钻以及图层
react.js·echarts
一行注释7 天前
echarts属性之title
前端·javascript·echarts
偷光9 天前
React 中使用 Echarts
前端·react.js·echarts
我就说好玩9 天前
基于echarts、php、Mysql开发的数据可视化大屏
前端·后端·信息可视化·echarts