sindresorhus/pageres

UnhandledPromiseRejectionWarning: URIError: URI malformed

xoco70 opened this issue · 1 comments

xoco70 commented

Hi, I am trying to generate an image from HTML page that contains a graph.

When I pass the html with prefix: "data:text/html"

return new Pageres({delay: 2, filename: "image.png"})
        .src("data:text/html," + data, ['1300x650'], {crop: true})
        .dest(__dirname)
        .run()

with data:

<html>
<head>
    <style>
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            margin: 0 auto;
        }

        body {
            padding: 5px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div class="row" style="width: 100%;margin:auto" align="center">
    <canvas id="weekly"></canvas>
</div>
<script>
    let config = {
        type: 'line',
        data: {
            labels: ,
            datasets: [
                {
                    label: "Energie totale consommée",
                    backgroundColor: 'rgba(255, 159, 64, 1)',
                    data: ,
                },
                {
                    label: "Energie solaire",
                    backgroundColor: 'rgba(54, 162, 235, 1)',
                    data: ,
                }],
            xAxisID: "daysWithHour",
        },
        options: {
            responsive: true,
            title: {
                display: true,
                text: 'Courbe d\'énergie hebdomadaire - Mairie ecole',
                fontSize: 18
            },
            tooltips: {
                mode: 'index',
            },
            legend: {
                position: "bottom",
            },
            hover: {
                mode: 'index'
            },
            elements: {point: {radius: 0, hitRadius: 10, hoverRadius: 10}},
            scales: {
                xAxes: [{stacked: true}],

                yAxes: [
                    {
                        ticks: {
                            beginAtZero: true,
                            callback: value => {
                                return value / 1000;
                            }
                        },
                        scaleLabel: {
                            display: true,
                            labelString: 'kW'
                        }
                    }]
            },
        }

    };

    window.onload = function () {
        let ctx = null;
        let elt = null;
        elt = document.getElementById('weekly');
        if (elt != null) {
            ctx = elt.getContext('2d');
            window.myLine = new Chart(ctx, config);
        }
    }
</script>
</body>
</html>

I get :

(node:373742) UnhandledPromiseRejectionWarning: URIError: URI malformed
    at decodeURI (<anonymous>)
    at module.exports (/home/julien/Code/customer_recap/node_modules/normalize-url/index.js:87:21)
    at module.exports (/home/julien/Code/customer_recap/node_modules/humanize-url/index.js:10:9)
    at module.exports (/home/julien/Code/customer_recap/node_modules/filenamify-url/index.js:10:20)
    at Pageres.create (/home/julien/Code/customer_recap/node_modules/pageres/dist/index.js:142:21)
    at Promise.all.src.map (/home/julien/Code/customer_recap/node_modules/pageres/dist/index.js:81:44)
    at Array.map (<anonymous>)
    at Pageres.run (/home/julien/Code/customer_recap/node_modules/pageres/dist/index.js:67:38)
    at makePngScreenshot (/home/julien/Code/customer_recap/index.js:120:10)
    at generatePNGs (/home/julien/Code/customer_recap/index.js:87:27)

But when I replace data with: <h1>Awesome!</h1> like in the example, it works.

Is it a bug, or am I using it the wrong way ?

guesant commented

Try to use the encodeURI function to escape some special characters from your HTML data's code. See Data URLs.

return new Pageres({delay: 2, filename: "image.png"})
-        .src("data:text/html," + data, ['1300x650'], {crop: true})
+        .src("data:text/html," + encodeURI(data), ['1300x650'], {crop: true})
        .dest(__dirname)
        .run()

This should work. Btw I think you can't render canvas using pageres or you will need a higher delay time.