抓取HTML5画布的每一帧

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

运行代码

将以下代码粘贴到javascript控制台中

var canvas=document.getElementByID(“myCanvas”);
无功放炮=[]
var grabblimit=10;//要拍摄的屏幕截图数
var grabrate=100;//毫秒。500=半秒

var计数=0;

函数showResults()。{
//console.log(快照);
对于(var i=0;i<shots.length;i++){
document.write('<img src=“'+shots[i]+'“/>\n');
}
}

var grabber=设置间隔(函数()。{
计数+;

如果(计数>抓取限制){
清除间隔(抓取器);
显示结果();
}

var img=canvas.todataurl(“image/png”);
射击。推(img);
};
< /代码> 

然后按ctrl enter.执行。


跑步需要几秒钟,所以请耐心等待。


之后,您应该拥有所有必要的帧(可能更多),以便通过ImageMagick创建动画GIF,this websitemakeagif.com,or other a p p.


旁注


如果出于某种原因,您需要输出为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!)但是它的颜色是各种深浅的绿色(booo!。不知道怎么做/为什么,但也许有人可以从这里拿走它,看看我错过了什么。


所以我们开始…同样的规则也适用-复制并粘贴到浏览器的javascript控制台中(它在火狐中落后,但谷歌Chrome速度相当快…10秒左右)。


var jsf=[“/demos/b64.js”,“lzwencoder.js”,“neuquant.js”,“gifencoder.js”];
var head=document.getElementsByTagname(“head”)[0];

对于(var i=0;i<jsf.length;i++){
var newjs=document.createElement('script');
newjs.type='text/javascript';
newjs.src='http://github.com/antimatre15/jsgif/raw/master/'+jsf[i];
head.appendchild(newjs);
}

//这篇文章很有帮助!
//http://antimatre15.com/wp/2010/07/javascript-to-animated-gif/

var w=setTimeout(function()//给外部JS 1秒的加载时间

console.log(“开始”);

var canvas=document.getElementByID(“myCanvas”);
var context=canvas.getContext('2d');
无功放炮=[]
var grabblimit=10;//要拍摄的屏幕截图数
var grabrate=100;//毫秒。500=半秒
var计数=0;

函数showResults()。{
console.log(“finishing”);
编码器.finish();
var binary_gif=encoder.stream().getdata();
var data_url='data:image/gif;base64,'+encode64(二进制_gif);
document.write(“<img src=”'+data_url+'”/>\n');
}

var编码器=new gifencoder();
encoder.setrepeat(0);//0->永远循环,1+->循环n次,然后停止
encoder.setdelay(500);//每N毫秒转到下一帧
编码器.start();

var grabber=设置间隔(函数()。{
console.log('抓取'+计数);
计数+;

如果(计数>抓取限制){
清除间隔(抓取器);
显示结果();
}

var imdata=context.getImageData(0,0,canvas.width,canvas.height);
encoder.addframe(上下文);

};

},1000);
< /代码> 

它使用了一些有用的代码、指针和JS文件,这些代码、指针和JS文件在这个博客帖子中被引用javascript to(animated)gif。我直接使用一些JS文件,但是如果要经常使用它,您应该在本地复制这些文件。


我的输出是这个gif:


所以这是有意义的,但不是你需要的……

使用JavaScript控制台的amiliar在firefox中(安装Firebug plugin)铬或狩猎。


如果你没有,用谷歌搜索,或者尝试右键点击页面上的任何地方,选择“检查元素“寻找”慰问“……”


代码的作用:


它可以让你抓取10个屏幕CANVAS每十分之一秒一个元素。这两个值都很容易修改,因为您可以调整以找到您想要的迭代次数。对于您给出的示例,canvas元素id是'画布'.


一旦屏幕被抓取,它就会将图像输出到页面中。此时,您可以保存单个图像。


运行代码


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


跑步需要几秒钟,所以请耐心等待。


在那之后,你应该有所有必要的帧(可能更多)来通过这个网站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(伊比!)但是它有各种不同的绿色(酒鬼!)不知道怎么做/为什么,但也许有人可以从这里拿走它,看看我错过了什么。


所以我们开始…同样的规则也适用-复制并粘贴到浏览器的javascript控制台中(它在火狐中落后,但谷歌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:


所以这是有意义的,但不是你需要的…