

htmlのある要素をcanvasに書き出しそれをサーバへpostする処理はhtml2canvas.jsを用いて可能になっています。  
この時htmlにアニメーションがあった場合は、アニメーションgifとしてpostしたいと考えていますが、可能でしょうか？


CC BY-SA 3.0
2015-02-05T11:13:56.820
5998
2015-02-05T15:34:53.887
525
question
html jquery
html要素のアニメーションをgifとしてキャプチャしたい


Yahoo! が MIT ライセンスで公開している、 [gifshot](https://github.com/yahoo/gifshot)
という軽量なライブラリを使うと、ウェブページ上でアニメーション GIF
画像の生成ができます。ただ、これは、「画像要素」もしくは「ビデオ要素」用に作られており、HTML
をそのまま取り込むことはできませんので、工夫する必要がありそうです。

... まあ、[前回の回答](https://ja.stackoverflow.com/questions/5851/)を応用すればできそうですね。連続して
DOM 要素のスクリーンショットを取りつつ、画像データを [gifshot](https://github.com/yahoo/gifshot)
に放り込む感じです。とりあえず、作ってみました。

以下のスニペットで、 "Add a screenshot as a new frame"
ボタンを押すと、[`html2canvas`](http://html2canvas.hertzen.com/)
で撮影したスクリーンショットを新しいフレームとして、アニメーションGIFを、オンメモリで生成します。前回同様 Download リンクも用意しています。

質問中では、 `<html>` 要素のアニメーションを取られたいとのことですが、スクリーンショットの対象となる DOM 要素を `<body>`
にすることで技術的には可能だと思われます。ただし、メモリの制約にはくれぐれも気をつけるようにしてください。

[code]

    var images = [];
    
    function appendScreenshotFrame( selector) {
        var element = $(selector)[0];
        html2canvas(element, { onrendered: function(canvas) {
            var imgData = canvas.toDataURL();
            images.push(imgData);
            createAnimationGIF(images);
        }});
    }
    
    function erase_screenshot() {
        $('#screen_image')[0].src = "";
        $('#download')[0].href = "#";
        $('#download')[0].innerHTML = "";
        images = [];
    }
    
    function createAnimationGIF( images) {
      gifshot.createGIF({
          gifWidth: 400,
          gifHeight: 25,
          images: images,
          interval: 0.2,
          text: 'フレーム数' + images.length,
          fontWeight: 'bold',
          fontColor: '#ff2700',
          sampleInterval: 12
      }, function (obj) {
          if (!obj.error) {
              var image = obj.image;
              $('#screen_image')[0].src = image;
              $('#download')[0].href = image;
              $('#download')[0].innerHTML = "Download GIF";
          }
      });
    }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
    <script src="http://yahoo.github.io/gifshot/js/dependencies/gifshot.min.js"></script>
    
    <div>
      <button onclick="appendScreenshotFrame('#target_screen')">Add a screenshot as a new frame</button>
      <button onclick="erase_screenshot()">Clear</button>
    </div>
    <hr />
    <b>Source DOM:</b>
    <div id="target_screen" style="width: 400px; height:25px;">
      <input type="text" style="width: 394px;"
             value="■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■" /> 
    </div>
    <hr />
    <b>Generated Image:</b>
    <div id="output_screen">
      <img id="screen_image">
    </div>
    <hr />
    <a id="download" href="#" download="test_anim.gif"></a>
[/code]


CC BY-SA 3.0
2015-02-05T15:34:53.887
6020
2015-02-05T15:34:53.887
2017-04-13T12:52:38.920
-1
4978
5998
answer