Canvas toDataURL在第一次尝试时不会返回整个URL

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;
                }
            });           
     }