抓取HTML5画布的每个帧 [英] Grabbing each frame of an HTML5 canvas

问题描述

这些调色板循环图像令人叹为观止： http://www.effectgames.com/ demos / canvascycle /？sound = 0

These palette cycle images are breathtaking: http://www.effectgames.com/demos/canvascycle/?sound=0

我想将其中的一些（或全部）变成桌面背景。

I'd like to make some (or all) of these into desktop backgrounds.

我可以使用动画gif版本，但我不知道如何从画布动画中获得它。有什么可用的东西可以做这些事情（特别是那个链接，一般来说）。

I could use an animated gif version, but I have no idea how to get that from the canvas "animation". Is there anything available yet that can do something along these lines (speficially for that link and generally speaking).

推荐答案

我有一个解决方案，但它依赖于您熟悉Firefox中的Javascript控制台（安装 Firebug插件），Chrome或Safari。

I have a solution but it is dependent on you being familiar with the Javascript Console in Firefox (install the Firebug plugin), Chrome or Safari.

如果您不是，请谷歌，或尝试右键单击页面上的任意位置，选择检查元素并查看for Console ...

In case you're not, google it, or try to just right click anywhere on the page, choose "Inspect Element" and look for "Console"...

代码的作用：

它允许您每1/10秒获取10个屏幕抓取 CANVAS 元素。这两个值都很容易修改，因为您可以调整以找到您想要获得的迭代次数。对于您给出的示例，canvas元素ID为' mycanvas '。

It allows you to take 10 screen-grabs of the CANVAS element every 1/10th of a second. Both these values are easily modified since you can tweak to find the number of iterations you'd like to get. For the example you give, the canvas element ID is 'mycanvas'.

一旦有了屏幕抓取，它就会将图像输出到页。此时，您可以保存单个图像。

Once it has the screen-grabs it outputs the images into the page. At that point you can save the individual images.

运行代码

将以下代码粘贴到 Javascript控制台：

var canvas = document.getElementById("mycanvas");
var shots  = [];
var grabLimit = 10;  // Number of screenshots to take
var grabRate  = 100; // Miliseconds. 500 = half a second

var count     = 0;

function showResults() {
    //console.log(shots);
    for (var i=0; i<shots.length; i++) {
      document.write('<img src="' + shots[i] + '"/>\n');
    }
}

var grabber = setInterval(function(){
  count++;

  if (count>grabLimit) {
    clearInterval(grabber);
    showResults();
  }

  var img     = canvas.toDataURL("image/png");
  shots.push(img);
}, grabRate);

并按 CTRL-Enter 执行它。

运行需要几秒钟，请耐心等待。

It should take a few seconds to run so please be patient.

之后你应该拥有所有的必要的框架（任何可能更多）通过ImageMagick，本网站 MakeAGif.com 或其他应用程序创建动画GIF 。

After that you should have all the necessary frames (any maybe more) to create an animated GIF via ImageMagick, this website MakeAGif.com, or other app.

旁注

如果出于某种原因需要输出为GIF根据需要更新JPG而不是PNG：

If for some reason you need to output as GIF of JPG instead of PNG just update, as needed, this:

var img     = canvas.toDataURL("image/png");

其中一个：

var img     = canvas.toDataURL("image/gif");
var img     = canvas.toDataURL("image/jpg");

支持输出 gif 或 jpg 可能不在所有浏览器中（应该是最多的）。

Support for output as gif or jpg may not be in all browsers (should be most).

（BIG）UPDATE＃1

首先，我保持上面的代码完整而不是更新它，因为这两种方法对其他人都有帮助。

First, I'm keeping the code above intact rather than updating it because both approaches could be helpful to others.

其次，这个新代码没有解决这个问题。它只是一个主要的缺点。它创建了一个动画GIF（ Yipee！），但它有各种不同的绿色（ Boooo！）。不确定如何/为什么，但也许有人可以从这里拿走它，看看我错过了什么。

Second, this new code DOES NOT SOLVE the problem. It kind-of does but one major drawback. It creates an animated GIF (Yipee!) but its in various shades of green (Boooo!). Not sure how/why, but maybe someone can take it from here and see what I've missed.

所以这里我们去......同样的规则适用 - 复制和将其粘贴到浏览器的Javascript控制台中（它在Firefox中滞后，但谷歌Chrome很快......运行10秒左右）。

So here we go... same rules apply - copy and paste it into the Javascript Console of a browser (it lags in Firefox but Google Chrome its pretty fast... 10 seconds or so to run).

var jsf  = ["/Demos/b64.js", "LZWEncoder.js", "NeuQuant.js", "GIFEncoder.js"];
var head = document.getElementsByTagName("head")[0];

for (var i=0;i<jsf.length;i++) {
  var newJS = document.createElement('script');
  newJS.type = 'text/javascript';
  newJS.src = 'http://github.com/antimatter15/jsgif/raw/master/' + jsf[i];
  head.appendChild(newJS);
}

// This post was very helpful!
// http://antimatter15.com/wp/2010/07/javascript-to-animated-gif/

var w = setTimeout(function() { // give external JS 1 second of time to load

    console.log('Starting');

    var canvas = document.getElementById("mycanvas");
    var context = canvas.getContext('2d');
    var shots  = [];
    var grabLimit = 10;  // Number of screenshots to take
    var grabRate  = 100; // Miliseconds. 500 = half a second
    var count     = 0;

    function showResults() {
        console.log('Finishing');
        encoder.finish();
        var binary_gif = encoder.stream().getData();
        var data_url = 'data:image/gif;base64,'+encode64(binary_gif);
        document.write('<img src="' +data_url + '"/>\n');
    }

    var encoder = new GIFEncoder();
    encoder.setRepeat(0);  //0  -> loop forever, 1+ -> loop n times then stop
    encoder.setDelay(500); //go to next frame every n milliseconds
    encoder.start();

    var grabber = setInterval(function(){
      console.log('Grabbing '+count);
      count++;

      if (count>grabLimit) {
        clearInterval(grabber);
        showResults();
      }

      var imdata = context.getImageData(0,0,canvas.width,canvas.height);
      encoder.addFrame(context);

    }, grabRate);

}, 1000);

它使用了一些有用的代码，指针和这篇博文中引用的JS文件 JavaScript to（Animated）GIF 。我直接使用一些JS文件，但如果你要使用它，你应该在本地复制这些文件。

It uses some helpful code, pointers and JS files referenced in this blog post JavaScript to (Animated) GIF. I use some JS files directly but you should copy these locally if you're going to use it a lot.

我的输出是这个GIF：

The output for me was this GIF:

所以它的东西，但不是什么你需要......

So its something, but not what you need...

这篇关于抓取HTML5画布的每个帧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！