0

SVG 内に複雑なインタラクティブ グラフィックがあります。ユーザーがpng/pdfとして出力できるように、SVGを非表示のキャンバスに変えたいです。

test111.js は div#forSVG を作成し、その中に svg#svg を作成します (さらに円、パス、テキスト)。

<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>

canvg関数への入力としてsvg#svg、div#forSVG、およびdiv.outerHTMLを使用しようとしましたが、次のようなエラーが常に発生します。

TypeError: undefined is not a function (evaluating 's.substr(0,1)')

さまざまなエラーがありますが、それらはすべて canvg.js の 50 行目付近にあり、すべて s 変数が未定義であることに関係していると思われます。編集 1640: canvg.js の関連する行は、 s が何であるかを教えてくれます:

this.canvg = function (target, s, opts) {

したがって、 canvg(canvas, svg) を呼び出すと、 s は入力した svg 変数であると思います (opts はオプションです)。Console.logging (typeof svg) はobjectを返します。

canvg.js の最初の 60 行:

/*
 * canvg.js - Javascript SVG parser and renderer on Canvas
 * MIT Licensed
 * Gabe Lerner (gabelerner@gmail.com)
 * 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);
        }
    }

編集の終わり

誰かが私が間違ったことを見つけることができますか? 変数 svg は、動的に作成された div と svg を見つけるのに問題はありません (コンソールに正しくログを記録しています)。ありがとう

4

2 に答える 2

2

ありがとうTJ - あなたのポイントは私を正しい方向に導きました.

Canvg には、オブジェクトではなく、文字列または html 入力が必要なようです。だからこれはうまくいった：

            var canvas = document.getElementById("canvas");

            var svg = document.getElementById("div#forSVG");
            var svgWider = svg.innerHTML;
            canvg(canvas, svgWider);
于 2015-12-02T16:53:36.033 に答える
0

頭のてっぺんから、「s」が何であるかを確認することをお勧めします。実際には文字列ではない可能性があるため、「s.substr(0,1)」を実行すると、エラーで参照される「未定義」になります。

于 2015-12-02T16:32:44.217 に答える