Black background appearing on SVG when converted to PNG for mPDF library

I’m working on a feature that converts DOM content into a PDF using the mpdf/mpdf library from Composer/Packagist, and it generally works great. However, part of the DOM content is generated using C3.js to create charts. I convert the C3.js SVG to a PNG by drawing it onto a canvas so that it appears in the PDF file.

The conversion works, but the resulting chart has a black background, which makes the legends unreadable and doesn’t look good.

Chart with black background

Here’s the code I’m using to create the canvas:

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
});

I’ve tried adding a rect element for a background, applying styles to the #chart svg via JS, and even setting the background in PHP with mPDF, but nothing seems to work.

Any ideas on how to fix this?

Thanks so much for your help!

You need to sign in to view this answers

Related Post