Canvg | Converting SVG to Canvas to output as image
I have a complex interactive graphic within an SVG. I want to turn the SVG into a hidden canvas so I can allow the user to output as png/pdf.
test111.js creates div#forSVG and then svg#svg within it (plus circles, paths, text).
<html>
<head>
<link rel="stylesheet" type="text/css" href="sql.css">
<script type="text/javascript" src="d3.v3.js"></script>
<script type="text/javascript">
function start() {
var canvas = document.getElementById("canvas");
var svg = document.getElementById("forSVG");
var svgWider = svg.outerHTML;
console.log(svg);
canvg(canvas, svg);
}
</script>
</head>
<body onload="start()">
<script type="text/javascript" src="test111.js"></script>
<script type="text/javascript" src="rgbcolor.js"></script>
<script type="text/javascript" src="StackBlur.js"></script>
<script type="text/javascript" src="canvg.js"></script>
<canvas id="canvas" width="100%" height="600px"></canvas>
</body>
I've tried using svg#svg, div#forSVG and div.outerHTML as an input to canvg function but I constantly get an error such as:
TypeError: undefined is not a function (evaluating 's.substr(0,1)')
There are different errors but they are all around line 50 of canvg.js and I suspect they all concern the s variable being undefined. EDIT 1640: The relevant line of canvg.js telling us what s is:
this.canvg = function (target, s, opts) {
So when I call canvg(canvas, svg) I think s is the svg variable I entered (opts being optional). Console.logging (typeof svg) returns object.
First 60 lines of canvg.js:
/*
* canvg.js - Javascript SVG parser and renderer on Canvas
* MIT Licensed
* Gabe Lerner ([email protected])
* http://code.google.com/p/canvg/
*
* Requires: rgbcolor.js - http://www.phpied.com/rgb-color-parser-in-javascript/
*/
(function(){
// canvg(target, s)
// empty parameters: replace all 'svg' elements on page with 'canvas' elements
// target: canvas element or the id of a canvas element
// s: svg string, url to svg file, or xml document
// opts: optional hash of options
// ignoreMouse: true => ignore mouse events
// ignoreAnimation: true => ignore animations
// ignoreDimensions: true => does not try to resize canvas
// ignoreClear: true => does not clear canvas
// offsetX: int => draws at a x offset
// offsetY: int => draws at a y offset
// scaleWidth: int => scales horizontally to width
// scaleHeight: int => scales vertically to height
// renderCallback: function => will call the function after the first render is completed
// forceRedraw: function => will call the function on every frame, if it returns true, will redraw
this.canvg = function (target, s, opts) {
// no parameters
if (target == null && s == null && opts == null) {
var svgTags = document.querySelectorAll('svg');
for (var i=0; i<svgTags.length; i++) {
var svgTag = svgTags[i];
var c = document.createElement('canvas');
c.width = svgTag.clientWidth;
c.height = svgTag.clientHeight;
svgTag.parentNode.insertBefore(c, svgTag);
svgTag.parentNode.removeChild(svgTag);
var div = document.createElement('div');
div.appendChild(svgTag);
canvg(c, div.innerHTML);
}
return;
}
if (typeof target == 'string') {
target = document.getElementById(target);
}
// store class on canvas
if (target.svg != null) target.svg.stop();
var svg = build(opts || {});
// on i.e. 8 for flash canvas, we can't assign the property so check for it
if (!(target.childNodes.length == 1 && target.childNodes[0].nodeName == 'OBJECT')) target.svg = svg;
var ctx = target.getContext('2d');
if (typeof(s.documentElement) != 'undefined') {
// load from xml doc
svg.loadXmlDoc(ctx, s);
}
else if (s.substr(0,1) == '<') {
// load from xml string
svg.loadXml(ctx, s);
}
else {
// load from url
svg.load(ctx, s);
}
}
END OF EDIT
Can anyone spot what I've done wrong? the variable svg is not having any trouble finding the div and svg that have been dynamically created (they are logging to console correctly). Thanks
Answer
Thanks TJ - your point helped me to the right direction.
Canvg seems to need a string or html input, not an object. So this worked:
var canvas = document.getElementById("canvas");
var svg = document.getElementById("div#forSVG");
var svgWider = svg.innerHTML;
canvg(canvas, svgWider);