html2canvas achieve DOM exported as images (entry)

Introduction : Visualization Chart page needs to provide the ability to save pictures, charts used g2, but g2 native style can not meet the high demand for customized, so use a custom style g2, and with the DOM rewrite the chart style, but then use pictures g2 generation method, part of the DOM can not be generated picture, then you will need to use DOM html2canvas generated picture.

 

 

First, the introduction of g2 and html2canvas (paper pie chart, for example, g2 usage view the document itself)　

import html2canvas from 'html2canvas';
import G2 from '@antv/g2';

First on the map:

 

 

g2 drawing method:

Draw () { 
      const Data = [ 
      {LOCATION: 'trimethylene', value: 44.9}, 
      {LOCATION: 'Lake', value: 19.7}, 
      {LOCATION: 'Cambodia', value: 17.3}, 
      {LOCATION: 'Hulunbeir Hulunbeier Hulunbeier Hulunbeier ', value: 14.4}, 
      {LOCATION:' Samui ', value:} 2.5, 
      {LOCATION:' Saipan ', value: 2.5} 
      ]; 
      const = new new G2.Chart Chart ({ 
      Container: 'C1', 
      width: 800, 
      height: 200 is, 
      padding: 'Auto' 
      }); 
      chart.source (Data); 
      chart.legend ({ 
        useHtml: to true, 
        position: 'right', 
        containerTpl: '<div class = "g2-legend">' +
          '<div class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></div>' +
          '</div>',
        itemTpl: (value, color, checked, index) => {
          checked = checked ? 'checked' : 'unChecked';
          return `<div class="g2-legend-list-item item-${index} ${checked}" data-value=${value} data-color=${color}
            style="cursor: pointer;font-size: 14px;width:100px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">
            <span width=150 style="border: none;padding:0;"><i class="g2-legend-marker" style="width:10px;height:10px;display:inline-block;margin-right:10px;background-color:${color};"></i></span>
            ${value}
            </div>`;
        },
      });
      chart.coord('theta', {
      radius: 0.8
      });
      chart.intervalStack().position('value').color('location', [ '#1890ff', '#37c661', '#fbce1e', '#2b3b79', '#8a4be2', '#1dc5c5' ])
      .style({
        stroke: 'white',
        lineWidth: 1
      })
      .label('value', val => {
        if (val < 3) {
          return null;
        }
        return {
          offset: -30,
          textStyle: {
            fill: 'white',
            fontSize: 14,
            shadowBlur: 2,
            shadowColor: 'RGBA (0, 0, 0, .45) 
          },
          formatter: text => {
            return text + '%';
          }
        };
      });
      chart.render();
    }　　

 useHtml configured as part of the legend true, render pages using DOM legend on the right way, because it is DOM, so we can set the text style exceeds displayed by an ellipsis, a red box is marked for a clearer shot range.

 

Second, the method Screenshot

Capture () { 
      const RECT = document.querySelector ( '# C1') getBoundingClientRect ();. 
      the let || document.body.scrollTop scrollTop = document.documentElement.scrollTop // Get the length of the rolling roll axis 
      console.log (document. . querySelector ( '# C1') getBoundingClientRect ()); // eslint-disable-Line 
      html2canvas (document.querySelector ( '# C1'), { 
        width: rect.width, 
        height: rect.height, 
        scrollY: -scrollTop, // page scrolling is present, this property needs to be set, at the mapping offset problems 
      }) the then (function (Canvas) {. 
          the console.log (canvas.toDataURL ()); // eslint-disable-Line 
          document.body.appendChild (Canvas); 
      }); 
    },

rect: Dom width can be obtained a high position and other attributes;

# C1: is a screenshot of the container, charts written inside the container;

The method of the first parameter passed html2canvas container Dom, the second parameter pass configuration parameters;

then you can get to the canvas callback screenshots generated, and then use canvas-generated image, you get a picture of what we want.

(For obvious effect, I will add to the generated canvas page)

ScrollY parameter which is very important, do not write the effect is as follows:

When the page has scrolling behavior, you will find the generated canvas artwork has shifted relative to the bottom of a piece of the pie is cut, the top of the multi-piece blank.

scrollY height corresponding to the page scroll, set up after a good effect:

 

 

 

 

Finally : html2canvas dom effect of the painting in the form of canvs indeed very powerful, we are happy to play at the time, also need to pay attention to some of its incompatibility issues, such as the issue of the effect of the ellipsis in the figure can not be displayed, there are some css3 special properties also need to pay attention.