convert html with highcharts graph to image using html2canvas
Question
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
and this is a screenshot for the results of running the code above.
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
3 answers
solution1
0 2017-07-24 14:46:16
.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 ...
solution2
0 2017-07-25 12:19:13
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.
solution3
0 ACCPTED 2017-08-01 17:00:51
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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.