canvas截图echarts自定义字体无效

Question

使用axios获取的数据进行渲染，并引入了自定义字体，在页面也预览也没问题。
但是使用html2canvas截图时，图表的字体就变回原样了，除了图表其他地方的字体没问题。
要怎么解决呢？

Answer 1

【以下回答由 GPT 生成】

问题的根本原因是html2canvas无法正确地捕捉和渲染canvas元素中使用的自定义字体。解决这个问题的一种方法是，在使用html2canvas截图之前，将自定义字体转换为base64编码，并直接应用到canvas中的字体样式上。

以下是一种可能的解决方案：

1. 将自定义字体文件（例如.woff或.ttf文件）转换为base64编码。可以使用一些在线工具或编程库来完成此任务。例如，可以使用以下JavaScript代码将.woff文件转换为base64编码：

function convertToBase64(file) {
   return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = error => reject(error);
   });
}

const fontFile = './path/to/font.woff'; // 替换为自己的字体文件路径
convertToBase64(fontFile).then(base64 => {
   console.log(base64); // 输出转换后的base64编码
});

1. 在Vue组件中引入html2canvas和axios库：

import html2canvas from 'html2canvas';
import axios from 'axios';

1. 在方法中使用axios获取数据并渲染图表：

export default {
   methods: {
      async fetchData() {
         try {
            const response = await axios.get('your_api_endpoint'); // 替换为自己的数据获取接口
            const data = response.data;

            // 根据数据渲染图表
            // ...

            // 截图
            const chartElement = document.getElementById('your_chart_id'); // 替换为图表DOM元素的ID
            const canvas = await html2canvas(chartElement);
            const image = canvas.toDataURL('image/png');
            console.log(image); // 输出截图的base64编码
         } catch (error) {
            console.log(error);
         }
      }
   }
}

1. 将转换后的base64编码应用到渲染图表的canvas元素中的字体样式上：

export default {
   methods: {
      async fetchData() {
         // ...

         // 获取转换后的base64字体编码
         const fontBase64 = await convertToBase64(fontFile); // 替换为转换后的字体文件base64编码

         // 根据数据渲染图表
         // ...

         // 设置图表中的自定义字体
         const chartCanvas = document.getElementById('your_chart_id').querySelector('canvas'); // 替换为渲染图表的canvas元素
         chartCanvas.style.fontFamily = "'Your Custom Font', sans-serif"; // 替换为自定义字体的名称
         chartCanvas.style.fontWeight = 'normal';
         chartCanvas.style.src = `url(${fontBase64}) format('woff')`; // 替换为转换后的字体文件base64编码

         // 截图
         // ...
      }
   }
}

这样，在使用html2canvas进行截图时，图表中的字体就会被正确地渲染成自定义字体了。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^