javascript - 抓取 HTML5 Canvas 的每一帧

Question

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

我想将其中一些(或全部)制作成桌面背景。

我可以使用动画 gif 版本，但我不知道如何从 Canvas “动画”中获取它。是否有任何可用的东西可以沿着这些方向做一些事情(特别是对于那个链接，一般来说)。

Answer 1

我有一个解决方案，但它取决于您是否熟悉 Firefox(安装 Firebug plugin)、Chrome 或 Safari 中的 Javascript 控制台。

如果您不是，请用谷歌搜索，或尝试右键单击页面上的任意位置，选择“检查元素”并查找“控制台”。 ..

代码的作用:

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

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

运行代码

将以下代码粘贴到 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 执行它。

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

之后，您应该拥有所有必要的帧(可能更多)以通过 ImageMagick 创建动画 GIF，此网站 MakeAGif.com ，或其他应用。

旁注

如果出于某种原因您需要输出为 JPG 的 GIF 而不是 PNG，请根据需要更新:

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

其中之一:

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

可能并非所有浏览器(应该是大多数)都支持输出为 gif 或 jpg。

(大)更新 #1

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

第二，这个新代码没有解决问题。它有点像一个主要缺点。它创建了一个动画 GIF(Yipee!)，但它具有各种深浅不一的绿色(Boooo!)。不知道如何/为什么，但也许有人可以从这里拿走它，看看我错过了什么。

我们开始吧......同样的规则适用 - 将其复制并粘贴到浏览器的 Javascript 控制台(它在 Firefox 中滞后，但谷歌 Chrome 非常快......运行 10 秒左右)。

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 文件，但是如果你要经常使用它，你应该将这些文件复制到本地。

我的输出是这个 GIF:

所以它有些东西，但不是您需要的...