html2canvasを用いて、テキストだけでなく、画像も保存する方法はありますか？

Question

Railsで生成された画面を、html2canvasを利用してスクリーンショット、別リンクにて保存、を実装しました。保存の範囲はhtmlのクラスを指定して、行っています。

その際に、画像もスクリーンショット可能したいのですが、うまくいきませんでした。画像の表示とスクリーンショットのラグかと思い、スクリーンショットの処理を画像表示後と指定したのですが、うまくきません。

html2canvasを使ってviewに表示されている画像とテキストを一緒に保存する方法をご存知の方、いらっしゃいましたらご教授いただけると幸いです。よろしくお願いします。

※もしくは、Gemで簡単に実装できる方法でもOKです。

Answer 1

Rails 環境ではなく、単体利用ですが、Examples for html2canvas を参照しつつ、Chrome 開発者コンソールですこし打ち込んでみました

$('<img/>').attr("src", "http://placehold.it/120x120").appendTo($('body'))
html2canvas(document.body, {onrendered: function(canvas) {document.body.appendChild(canvas)}, allowTaint: true, useCORS: true, taintTest: false})

キャンバスを描画させるときに利用できるオプションに、taintTest: false を追加することで、外部の画像を描画させることが出来ました

ただ、taint...汚染という意味合いのある言葉が使われていますので、このオプションを安全性についてはドキュメントをよく読んで判断する必要がありそうです

簡単に調べてみましたが、何か参考になれば幸いです

Links

• Documentation for html2canvas
• FAQ