递归图像处理（画布，HTML5，Javascript）

Question

I'm trying to use Canvas for a fractal algorithm that requires one to draw something, then capture that image, draw some mangled copies of it, then capture that image, etc. I'm running into a problem, though, because toDataURL() seems to be causing a failure in either the clear screen command ("clearRect") or the restore transformation matrix command ("restore"). 我正在尝试使用Canvas进行分形算法，该算法需要先绘制一些东西，然后捕获该图像，绘制其一些变形的副本，然后捕获该图像，等等。但是，由于toDataURL（）似乎导致清除屏幕命令（“ clearRect”）或还原转换矩阵命令（“ restore”）失败。

The code below is intended to draw a black square, then copy the canvas to a variable named “img”, translate down and to the right, then paste “img” to the new position. 下面的代码旨在绘制一个黑色正方形，然后将画布复制到名为“ img”的变量，向下和向右平移，然后将“ img”粘贴到新位置。 The result should be two squares. 结果应为两个正方形。 But instead it's first 1 square, then 2 squares, then 3, then 4 … (Then it goes out of bounds, but presumably it's still copying squares off the page.) 但是取而代之的是它是第一个1平方，然后是2平方，然后是3，然后是4…（然后超出范围，但大概仍在复制页面上的正方形。）

Any help will be greatly, greatly appreciated. 任何帮助将不胜感激。

Here's a link to the code in action: https://www.msu.edu/~brown202/dataURLproblem.html 这是运行中的代码的链接： https : //www.msu.edu/~brown202/dataURLproblem.html

Here's the code: 这是代码：

    <html>
        <head>
            <script type="application/x-javascript">
                function draw() {
                    var canvas = document.getElementById("fractal");
                    if (canvas.getContext) {
                        var ctx = canvas.getContext("2d");
                        var img;
                        ctx.clearRect(0,0,400,400);    // clear the canvas, which measures 400 by 400
                        ctx.fillRect (0,0,100,100);    // draw a square
                        ctx.save();
                            img = canvas.toDataURL();    // store the canvas image in "img"
                            ctx.translate(100,100);      // shift picture
                            ctx.drawImage(img, 0,0);    // draw the stored image of the canvas in the new place
                        ctx.restore();
                    }
                }
                function init() {
                    setInterval(draw,500);          // repeat every 500 ms.
                }
            </script>
        </head>
        <body onload="init();">
            <canvas id="fractal" width="400" height="400">
                <p>This animation requires a browser that supports the
                <a href="http://www.w3.org/html/wg/html5/">HTML5</a> 
                &lt;canvas&gt; feature.</p>
            </canvas>
        </body>
    </html>

Answer 1

If you look at the javascript console when your page runs, it's generating errors: 如果您在页面运行时查看javascript控制台，则会生成错误：

Uncaught TypeError: Type error 未捕获的TypeError：类型错误

This is because you're trying to pass a string (the dataURL version of the image) to drawImage when the drawImage function is expecting an image/canvas. 这是因为当drawImage函数需要图像/画布时，您试图将字符串（图像的dataURL版本）传递给drawImage 。

The drawImage function can take in a canvas element as its argument, which will do what you want. drawImage函数可以将canvas元素作为其参数，这将完成您想要的操作。

Instead of doing: 而不是做：

img = canvas.toDataURL();
ctx.drawImage(img, 0,0);

Just do: 做就是了：

ctx.drawImage(canvas, 0,0);

递归图像处理（画布，HTML5，Javascript）

问题描述

1 个解决方案

解决方案1
6 2011-08-28 06:32:33

递归图像处理（画布，HTML5，Javascript）

问题描述

1 个解决方案

解决方案1 6 2011-08-28 06:32:33

解决方案1
6 2011-08-28 06:32:33