将 SVG 转换为 PNG 用于 mPDF 库时出现黑色背景

Question

我正在开发一项功能，可以使用 Composer/Packagist 的 mpdf/mpdf 库将 DOM 内容转换为 PDF，而且通常效果很好。但是，部分 DOM 内容是使用 C3.js 生成的以创建图表。我通过将 C3.js SVG 绘制到画布上将其转换为 PNG，以便它出现在 PDF 文件中。

转换有效，但生成的图表具有黑色背景，这使得图例难以阅读并且看起来不太好。

黑色背景图表

这是我用来创建画布的代码：

document.getElementById('generatePDF').addEventListener('click', function(event) {
    event.preventDefault();

    // Récupérer le contenu HTML (données de la campagne)
    const campaignContent = document.querySelector('.container--campaigns').innerHTML;

    // Convertir le graphique C3.js en image base64
    const svg = document.querySelector('#chart svg');
    const svgData = new XMLSerializer().serializeToString(svg);
    
    // Créer une image base64 à partir du SVG
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();

    const svgBase64 = 'data:image/svg+xml;base64,' + btoa(encodeURIComponent(svgData).replace(/%([0-9A-F]{2})/g, function(match, p1) {
        return String.fromCharCode(parseInt(p1, 16));
    }));
    
    img.onload = function() {
        canvas.width = svg.clientWidth;
        canvas.height = svg.clientHeight;
        ctx.drawImage(img, 0, 0);
        const chartImageBase64 = canvas.toDataURL('image/png');

        // Remplir les champs cachés avec les données récupérées
        document.getElementById('htmlContent').value = campaignContent;
        document.getElementById('chartImage').value = chartImageBase64;

        // Soumettre le formulaire
        document.getElementById('formPDF').submit();
    };

    img.src = svgBase64;  // Convertir le SVG en image
});

我尝试过添加一个 rect 元素作为背景，通过 JS 将样式应用到 #chart svg，甚至使用 mPDF 在 PHP 中设置背景，但似乎没有任何效果。

关于如何解决这个问题有什么想法吗？

非常感谢您的帮助！

Answer 1

这可能是透明部分。有时呈现绿色。因此，请让我们将所有透明部分更改为白色。

document.getElementById('generatePDF').addEventListener('click', function(event) {
  event.preventDefault();

  // Récupérer le contenu HTML (données de la campagne)
  const campaignContent = document.querySelector('.container--campaigns').innerHTML;

  // Convertir le graphique C3.js en image base64
  const svg = document.querySelector('#chart svg');
  const svgData = new XMLSerializer().serializeToString(svg);

  // Créer une image base64 à partir du SVG
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const img = new Image();

  const svgBase64 = 'data:image/svg+xml;base64,' + btoa(encodeURIComponent(svgData).replace(/%([0-9A-F]{2})/g, function(match, p1) {
    return String.fromCharCode(parseInt(p1, 16));
  }));

  img.onload = function() {
    canvas.width = svg.clientWidth;
    canvas.height = svg.clientHeight;
    ctx.drawImage(img, 0, 0);

    // lets change all alpha 0 to alpha rgba(255, 255, 255, 255)
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
      if (data[i + 3] == 0) {
        data[i] = 255; 
        data[i + 1] = 255; 
        data[i + 2] = 255; 
        data[i + 3] = 255; 
      }
    }
    ctx.putImageData(imageData, 0, 0);
    
    // your code continues
    const chartImageBase64 = canvas.toDataURL('image/png');

    // Remplir les champs cachés avec les données récupérées
    document.getElementById('htmlContent').value = campaignContent;
    document.getElementById('chartImage').value = chartImageBase64;

    // Soumettre le formulaire
    document.getElementById('formPDF').submit();
  };

  img.src = svgBase64; // Convertir le SVG en image
});