SaveAsImage add chart watermark

[MINDoSOFT]

What problem does this feature solve?

I need to add some customization on the chart (e.g. watermark), that needs to happen only when the chart's saveAsImage toolbox button is clicked.

What does the proposed API look like?

I believe this can be fixed with 2 different ways.

One way is to add a backgroundImage option is saveAsImage chart option.

https://ecomfe.github.io/echarts-doc/public/en/option.html#toolbox.feature.saveAsImage

this backgroundImage will be added as background to the chart only in the exported image
produced when the chart's saveAsImage toolbox button is clicked.

The other way I can think of is to add two events on the chart called saveAsImageBefore/After (like restore event exists)

https://ecomfe.github.io/echarts-doc/public/en/api.html#events.restore

saveAsImageBefore will have some code to draw the watermark, and saveAsImageAfter will hide the watermark.

[echarts-bot]

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

Have a nice day! 🍵

[Ovilia]

I think you should make a custom toolbox feature and in onclick, add watermark with graphic and get the image using getDataURL.

[MINDoSOFT]

Yes that sounds like a reasonable solution.
Thank you for your help !

[yogat3ch]

Hey @MINDoSOFT,
Did you manage to get this working? I'm trying to combine the Echarts example code to generate a save with watermark functionality.

The onclick event looks something like:

function () {
          var ecModel = this.ecModel.setOption({
            graphic : [
              {
                  type: 'group',
                  rotation: Math.PI / 4,
                  bounding: 'raw',
                  right: '10%',
                  bottom: '10%',
                  z: 100,
                  children: [
                      {
                          type: 'rect',
                          left: 'center',
                          top: 'center',
                          z: 100,
                          shape: {
                              width: 400,
                              height: 50
                          },
                          style: {
                              fill: 'rgba(0,0,0,0.3)'
                          }
                      },
                      {
                          type: 'text',
                          left: 'center',
                          top: 'center',
                          z: 100,
                          style: {
                              fill: '#fff',
                              text: 'ECHARTS LINE CHART',
                              font: 'bold 26px sans-serif'
                          }
                      }
                  ]
              }
          ]
      });
    debugger;
        const model = this.model;
        const api = this.api;
        const title = model.get('name') || ecModel.get('title.0.text') || 'echarts';
        const isSvg = api.getZr().painter.getType() === 'svg';
        const type = isSvg ? 'svg' : model.get('type', true) || 'png';
        const url = api.getDataURL({
            type: type,
            backgroundColor: model.get('backgroundColor', true)
                || ecModel.get('backgroundColor') || '#fff',
            connectedBackgroundColor: model.get('connectedBackgroundColor'),
            excludeComponents: model.get('excludeComponents'),
            pixelRatio: model.get('pixelRatio')
        });
        const browser = env.browser;
        // Chrome, Firefox, New Edge
        if (isFunction(MouseEvent) && (browser.newEdge || (!browser.ie && !browser.edge))) {
            const $a = document.createElement('a');
            $a.download = title + '.' + type;
            $a.target = '_blank';
            $a.href = url;
            const evt = new MouseEvent('click', {
                // some micro front-end framework， window maybe is a Proxy
                view: document.defaultView,
                bubbles: true,
                cancelable: false
            });
            $a.dispatchEvent(evt);
        }
    }

I'm getting the error :
echarts-en.min.js:45 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
From this bit:

  const url = api.getDataURL({
            type: type,
            backgroundColor: model.get('backgroundColor', true)
                || ecModel.get('backgroundColor') || '#fff',
            connectedBackgroundColor: model.get('connectedBackgroundColor'),
            excludeComponents: model.get('excludeComponents'),
            pixelRatio: model.get('pixelRatio')
        });

[fbucchini]

In case anyone comes across this issue and gets a Tainted canvases may not be exported. error message from the browser's console: the error may be due to the image used in the custom feature's icon field!