Result

スニペットとは言えませんが・・ｗ
html2canvasとjQueryを使ってCanvas化、ダウンロード出来るようにするコード。tableとかグラフをユーザーがダウンロード出来るようにする、みたいなの。

jQuery

jQueryに加えてhtml2canvas.jsを読み込み。サンプルではCDNを使ってます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

jQuery

var element = $("#html-content-holder"); // 画像化したい要素をセレクタに指定
var getCanvas; 
 
    //プレビュー
    $("#btn-Preview-Image").on('click', function () {
         html2canvas(element, {
         onrendered: function (canvas) {
                $("#previewImage").append(canvas);
                getCanvas = canvas;
             }
         });
    });

    // コンバートしてダウンロード
	$("#btn-Convert-Html2Image").on('click', function () {
    var imgageData = getCanvas.toDataURL("image/png");
    var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
    //ファイル名を設定
    $("#btn-Convert-Html2Image").attr("download", "hogehoge.png").attr("href", newData);
	});

html

<div id="html-content-holder" style="background-color: #ddd; color: #111; width: 500px;padding-left: 25px; padding-top: 10px;">
        <strong>テストです</strong><hr/>
        <h3 style="color: #3e4b51;">
           HTMLを画像にしてダウンロードできるスクリプトのテスト
        </h3>
        <p style="color: #3e4b51;">
            <b>太文字</b> テキストテキストテキスト </p>
        <p style="color: #3e4b51;">
            <i>イタリック</i> テキストテキストテキスト 
        </p>
    </div>
    <input id="btn-Preview-Image" type="button" value="プレビュー"/>
    <a id="btn-Convert-Html2Image" href="#">ダウンロード</a>
    <br/>
    <h3>プレビュー :</h3>
    <div id="previewImage">
    </div>

スタイルはインラインで。

via

Convert HTML to Image in Jquery [Div or Table to jpg/ png]