前提
・指定したdivのidに対して、setIntervalを使用して一定期間毎に変化を加えています
質問
・ブラウザにおける指定div描画内容を、アニメーションgifとして保存することは出来るでしょうか?
補足
・専用ツールはなるべく使用したくない
・スクリプト経由で何かを投げたら結果が返ってくるAPIみたいなのは可
想定
・ユーザが、右クリックで保存
・あるいは、jsスクリプト内の何らかのアクションで保存
・もしくは、ページロード後、一定期間経過後、とかで自動保存
前提
・指定したdivのidに対して、setIntervalを使用して一定期間毎に変化を加えています
質問
・ブラウザにおける指定div描画内容を、アニメーションgifとして保存することは出来るでしょうか?
補足
・専用ツールはなるべく使用したくない
・スクリプト経由で何かを投げたら結果が返ってくるAPIみたいなのは可
想定
・ユーザが、右クリックで保存
・あるいは、jsスクリプト内の何らかのアクションで保存
・もしくは、ページロード後、一定期間経過後、とかで自動保存
Canvasに画像を描画すればそのデータを取得し、それをもってFileAPI等を用いてGIF画像を作成し、Blobとa要素のdownload属性を利用することなどにより任意のタイミングでダウンロードさせることができます。
そしてCanvasにはSVGも描画できますから、SVGのforeignobject要素下に描画したい任意のhtml要素をスタイルがインラインで適用された形で組み込んで描画すれば、一定の制限下で実現可能と思われます。