Question

我有一些代码，它使用Raphael（使用Raphael将400x400图像加载到SVG中）在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>

Answer 1

听起来画布区域保持默认的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;
                }
            });           
     }

首次尝试时，Canvas toDataURL不会返回整个URL

1 个答案: