Canvg | Konvertierung von SVG auf die Leinwand, um die Ausgabe als Bild
Ich habe eine komplexe interaktive Grafik innerhalb eines SVG. Ich möchte die SVG in eine versteckte Leinwand, so kann ich es dem Benutzer erlauben, um die Ausgabe als png/pdf.
test111.js erstellt div#forSVG und dann svg#svg-innerhalb (plus Kreise, Pfade, 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>
Habe ich versucht, mit Hilfe von svg#svg, div#forSVG und div.outerHTML als input für die canvg Funktion, aber ich erhalte immer eine Fehlermeldung wie:
TypeError: undefined is not a function (evaluating 's.substr(0,1)')
Gibt es verschiedene Fehler, aber Sie sind alle um die Zeile 50 der canvg.js und ich vermute, Sie alle betreffen die s-variable wird nicht definiert. EDIT 1640: Die relevante Zeile canvg.js sagen Sie uns, was s ist:
this.canvg = function (target, s, opts) {
So, wenn ich rufe canvg(canvas, svg), ich denke s ist die svg-variable, die ich eingegeben (opts optional). Console.Protokollierung (typeof svg) gibt Objekt.
Ersten 60 Zeilen 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);
}
}
ENDE BEARBEITEN
Kann jeder spot, was ich falsch gemacht habe? die variable svg ist nicht, dass Sie ohne Probleme bei jedem div-Element und svg wurden dynamisch erstellt (Sie sind logging auf die Konsole korrekt).
Dank
- Wenn das problem Auftritt, um canvg.js:50, dann schlage ich vor, posten canvg.js. Schwer zu helfen, das problem zu diagnostizieren, wenn dort nichts zu sehen.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Dank TJ - dein Punkt hat mir geholfen, in die richtige Richtung.
Canvg scheint, müssen Sie eine Zeichenfolge oder eine html-Eingabe, nicht ein Objekt. So, das hat funktioniert:
Aus der Spitze von meinem Kopf, würde ich vorschlagen, zu prüfen, was "s" ist. Könnte es nicht tatsächlich ein string sein, damit "s.substr(0,1)" wird die "undefined" verwiesen, die in Ihrem Fehler.