Webdevelopment: SVG-to-canvas

Last update: 2/15/2021, 10:46:27 AM

  static captureAndDownload(chartElement, title = 'chart') {
    const element = chartElement.nativeElement.getElementsByTagName('svg')[0];
    let {width, height} = element.getBBox();
    const clone = element.cloneNode(true);
    clone.setAttribute('xmlns',  'http://www.w3.org/2000/svg')
    console.log(clone.outerHTML)
    const blob = new Blob([clone.outerHTML], {type:'image/svg+xml;'});

    const URL = window.URL || window.webkitURL;
    const blobUrl = URL.createObjectURL(blob);
    let image = new Image();

    image.onload = () => {
      let canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;
      let context = canvas.getContext('2d');
      context.fillStyle = 'white';
      context.fillRect(0, 0, width, height);
      
      context.drawImage(image, 0, 0, width, height);

      console.log('image drawn');

      const link = document.createElement('a');
      link.download = `${title}.png`;
      // link.style.opacity = '0';
      // document.body.append(link);
      link.href = canvas.toDataURL();
      link.click();
      link.remove();
    }

    image.onerror = (event) => {
      console.error('image error')
    }

    image.src = blobUrl;
  }