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

【问题标题】：Canvas toDataURL doesn't return whole URL on first tryCanvas toDataURL 在第一次尝试时不返回整个 URL
【发布时间】：2012-06-16 11:59:31
【问题描述】：

我有一些代码使用 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>

【问题讨论】：

标签： javascript html image canvas

【解决方案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;
                }
            });           
     }

【讨论】：

这只解决了尺寸错误的问题，即使这也不是真正的问题。我第二次运行代码（不重新加载页面）它的大小是正确的，它显示了图片。我的问题是它第一次运行时（当我希望它正常工作时），它给了我一张空白图片，甚至不是 SVG 的缩放副本。
OK - 已将解决方案添加到答案中。本质上，您只需要等待 canvg 进行渲染，然后再进行其余操作。
做到了，谢谢。我正忙着查看没有回调的 canvg 示例，我不知道它存在。