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.
InformationsquelleAutor emma | 2015-12-02
Schreibe einen Kommentar