3

我有一些代码，它使用 Raphael 在 SVG 上绘制绘图（使用 Raphael 将 400x400 图像加载到 SVG 中），将其转换为带有 canvg 的画布，然后应该使用 canvas.toDataURL 并使其成为图像。所有这些都应该在按下按钮时发生。前两步有效，但第三步有问题。第一次按下按钮时，一个 300x150 的空白图像被放置在最终的 div 中，而不是 400x400 的图像。如果我再次按下按钮，图像会显示得很好（正确的尺寸和一切）。我尝试同时使用 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

听起来画布区域保持在默认的 350 x 150。尝试设置

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