0

I want to convert an HTML page to an image, when I use the below code I get a result that doesn't quite match what I'd expect.

html2canvas($("#sharedOne"), {                          
onrendered: function (canvas) {                  
console.log("canvas",canvas)
    var imgsrc = canvas.toDataURL("image/png");
    console.log(imgsrc);
   }
});

This is a screenshot of the HTML

This is a screenshot

and this is a screenshot for the results of running the code above.

this is a screenshot When I use the code below I get an error:

var canvas = document.getElementById('sharedOne');
console.log("CSSSS",canvas)
var t = canvas.toDataURL("image/png");
console.log("chart",t)

The error is:

error canvas.toDataURL is not a function

I create example for this issue please check

https://jsfiddle.net/solanki/hku6r7g2/

Note: The HTML page contains a highchart graph

thebuddingdeveloper
  • 65
  • 1
  • 11
Solanki ram
  • 77
  • 2
  • 10

3 Answers3

0

.toDataURL() can only be called on <canvas> elements; it can't be used on arbitrary HTML.

console.log("Canvas:");
var theCanvas = document.getElementById('theCanvas');
var a = theCanvas.toDataURL("image/png");
console.log(a); // this will work

console.log("Div:");
var theDiv = document.getElementById('theDiv');
// this will throw the "not a function" error:
var b = theDiv.toDataURL("image/png"); 
<div id="theDiv"></div>

<canvas id="theCanvas"></canvas>

The html2canvas plugin you first used creates a <canvas> element based on the original HTML so you can use .toDataURL() on it -- but it doesn't support SVG, which is why your chart isn't visible in the output.

Some other techniques for converting HTML to an image can be found in this (old, but I don't see anything more recent at first look) question: Render HTML to an image

Meanwhile, for converting SVG to an image, see Convert SVG to image (JPEG, PNG, etc.) in the browser

You may be able to chain these techniques in sequence: first convert your SVG into a jpeg or png, then convert the HTML containing the image into a <canvas>, then use .toDataURL on that...

Daniel Beck
  • 20,653
  • 5
  • 38
  • 53
  • I think it is working without canvas please check this link https://jsfiddle.net/solanki/hku6r7g2/ I have the same issue – Solanki ram Jul 24 '17 at 14:52
  • @Solankiram The code in that fiddle uses html2canvas to convert the HTML to a `` element before calling `.toDataURL()` on it. (Note the output of the `console.log("canvas", canvas)` line.) That is the same technique used in the accepted answer in the older question I linked to. – Daniel Beck Jul 24 '17 at 14:57
  • @Solankiram sorry, I didn't realize at first there were (sort of) two different questions here, and I'd only answered one of them. I've updated the answer – Daniel Beck Jul 24 '17 at 15:10
  • @deniel please check below link. I create an example on js fiddle – Solanki ram Jul 25 '17 at 05:12
  • Yes that's the same fiddle we were talking about earlier. It doesn't work because html2canvas can't convert an svg. – Daniel Beck Jul 25 '17 at 11:04
0

As far as I analyzed this problem, I came to know that this deals about conversion of SVG to PNG (SVG -> Canvas -> PNG). For this case, html2canvas might not work well.

Why doesn't html2canvas fit in this case:

Since Highcharts makes use of SVG to render the graphs and charts, it requires svg to be converted to canvas instead of HTML. html2canvas is a very good html to canvas converter but it appears that it was not designed to convert svg's or may render faulty.

On searching Google, I came across something called Canvg which I thought might help you. SO I've coded using it and it worked out. Below I've attached the code snippet which you may use if you wish:

    <html>
<head></head>
<body>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.svg.js"></script>
-->

<script type="text/javascript" src="http://canvg.github.io/canvg/rgbcolor.js"></script> 
<script type="text/javascript" src="http://canvg.github.io/canvg/StackBlur.js"></script>
<script type="text/javascript" src="http://canvg.github.io/canvg/canvg.js"></script>
<div id="sharedOne">
    <div id="container"></div>
    <button  class="clickGrn">
        GENERATE IMAGE
    </button>
</div>
<div id="img">
  <img id="newimg">
</div>

<script>
       Highcharts.chart('container', {

        title: {
            text: 'Solar Employment Growth by Sector, 2010-2016'
        },

        subtitle: {
            text: 'Source: thesolarfoundation.com'
        },

        yAxis: {
            title: {
                text: 'Number of Employees'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },

        plotOptions: {
            series: {
                pointStart: 2010
            }
        },

        series: [{
                name: 'Installation',
                data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
            }, {
                name: 'Manufacturing',
                data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
            }, {
                name: 'Sales & Distribution',
                data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
            }, {
                name: 'Project Development',
                data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
            }, {
                name: 'Other',
                data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
            }]

    });

    /*
    YOU SHALL REPLACE THE FOLLOWING CODE WITH THE CODE PROVIDED BELOW
    =================================================================
    $("body").on("click", ".clickGrn", function () {
        alert("Calll");
        html2canvas($("#sharedOne"), {
        allowTaint: true,
                onrendered: function (canvas) {
                    canvg('canvas', canvas);
                    var imgsrc = canvas.toDataURL("image/jpg");
                    console.log(imgsrc);
                    $("#newimg").attr('src', imgsrc);
                }
            });
        });
    */

$("body").on("click", ".clickGrn", function () {

    var canvasSharedOne = document.createElement("canvas");
    var HighChartsSVG=$('#container').find('svg')[0].outerHTML;
    canvg(canvasSharedOne, HighChartsSVG);
    var imgsrc = canvasSharedOne.toDataURL();
    document.getElementById('newimg').src = imgsrc;

    });

</script>
</body>
</html>

But yes, still I'm trying to use the latest version of html2canvas which contains an additional html2canvas.svg.js but could not figure out how to use it as the creator has newly written the library from scratch. Also he has specified that SVG rendering support is added. on reading the code I think he has used FabricJS for canvas support.

Since it is new, we cannot expect code examples as it is still in development stage.

thebuddingdeveloper
  • 65
  • 1
  • 11
0

It looks like it works with beta release (0.5.0-beta4) of html2canvas.

$('#convert').bind('click', function() {
  html2canvas($("#main-container"), {
    onrendered: function(canvas) {
      var imgsrc = canvas.toDataURL("image/png");
      $('<img src="' + imgsrc + '" />').appendTo('#main-container');
    }
  });
});

Example:
http://jsfiddle.net/g1c8Lyfn/

pawel_d
  • 3,061
  • 1
  • 8
  • 13