html2canvas не отображает пользовательские шрифты в png - PullRequest
Новая
       17

html2canvas не отображает пользовательские шрифты в png

0 голосов
/ 28 октября 2019

Моя проблема в том, что html2canvas не будет отображать пользовательские шрифты. Я использую styled-компоненты и реагировать на в моем проекте. Когда я использую системный шрифт в отдельном компоненте, html2canvas работает отлично, но когда я пытаюсь использовать пользовательские шрифты, он отображает системный шрифт по умолчанию. Вот мой код, который генерирует png: 

this.generateImage = () => {
      const chart = this.myRef.current;
      const chartComponent = this.chartComponentRef.current;
      const chartComponentSizes = chartComponent.getBoundingClientRect();

      html2canvas(chart, {
        foreignObjectRendering: true,
        useCORS: true,
        allowTaint: true,
        imageTimeout: 5000,
      }).then((canvas) => {
        const croppedCanvas = document.createElement('canvas');
        const croppedCanvasContext = croppedCanvas.getContext('2d');

        croppedCanvas.width = chartComponentSizes.width + 20;
        croppedCanvas.height = chartComponentSizes.height + 20;

        croppedCanvasContext.drawImage(
          canvas,
          0,
          0,
          chartComponentSizes.width + 20,
          chartComponentSizes.height + 20,
          0,
          0,
          chartComponentSizes.width + 20,
          chartComponentSizes.height + 20,
        );

        this.setState({ screenCapture: croppedCanvas.toDataURL() });
        const element = document.createElement('a');
        element.setAttribute('href', croppedCanvas.toDataURL());
        element.setAttribute('download', `${new Date().toLocaleDateString()}-img.png`);
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);
      });
    };
...