3

Raphaelを使用してSVGで作成された描画（Raphaelを使用してSVGにロードされた400x400の画像）を取得し、canvgを使用してキャンバスに変換し、canvas.toDataURLを取得して画像にするコードがあります。これはすべて、ボタンが押されたときに発生するはずです。最初の2つのステップは機能しますが、3番目のステップはグリッチです。初めてボタンを押すと、400x400の画像ではなく、300x150の空白の画像が最終divに配置されます。もう一度ボタンを押すと、画像がきれいに表示されます（正しいサイズとすべて）。img.onloadとjqueryバージョン$（img）.loadの両方を使用しようとしましたが、どちらも問題の発生を妨げていないようです。したがって、キャンバスがまだ完全に描画されていないという問題のように感じますが、それを証明することはできず、描画されるまでコードを待たせることができないようです。以下はすべてのコードです。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
    <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script> 
    <script type="text/javascript" src="scripts/jquery.js"></script>
    <script type="text/javascript" src="scripts/raphael.js"></script>
    <script type="text/javascript" src="scripts/excanvas.compiled.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var nowX, nowY, R = Raphael("svg_drawing", 400, 400);

            $($("svg").get(0)).attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
            var templ = R.image("images/band_clutch.jpg", 0, 0, 400, 400);

        });

        function toImg(){
            var svg = $("#svg_drawing").html().replace(/>\s+/g, ">").replace(/\s+</g, "<");
            var canvas = $("#canvas")[0];
            canvg(canvas, svg);
            var imgData = canvas.toDataURL('image/jpg');
            var img = new Image();
            $(img).load(function(){
                $("#drawing_area").html("");
                $(img).appendTo("#drawing_area");
            });
            img.src = imgData;
        }

    </script>
    <title>Sandbox</title>
</head>
<body style="margin: 0; width:3000px">
    <div id="svg_drawing" style="background-color:white;display:inline-block;height:400px;width:400px;border:1px solid black;"></div>

    <canvas id="canvas" style="display:inline-block;height:400px;width:400px;border:1px solid red;"></canvas>

    <div id="drawing_area" style="background-color:white;display:inline-block;height:400px;width:400px;border:1px solid black;"></div>
            <button onclick="toImg()" style="display:inline-block;vertical-align:top;">Do it</button>
</body>
</html>
4

1 に答える 1

5

キャンバス領域がデフォルトの350x150のままになっているようです。設定してみてください

canvas.width = canvas.height = 400;

描画する前に（インラインCSSをそのままにしてください）。

実際のレンダリングの問題を修正するには、レンダリングが完了したら、canvgメソッドにtoDataURIを非同期的に実行するように指示する必要があります。

function toImg(){
        var svg = $("#svg_drawing").html().replace(/>\s+/g, ">").replace(/\s+</g, "<");
        var canvas = $("#canvas")[0];
        canvg(canvas, svg, {
            renderCallback : function(){
                var imgData = canvas.toDataURL('image/jpg');
                var img = new Image();
                $(img).load(function(){
                    $("#drawing_area").html("");
                    $(img).appendTo("#drawing_area");
                });
                img.src = imgData;
                }
            });           
     }
于 2012-06-13T14:17:30.207 に答える