Html2Canvas Thumbnail Image Generator

var contentFactory = TinyMCE + html2canvas.js html2canvas.js is pasted underneath original code.

by codeonion

HTML

<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<!--  NOTES: Cross-domain content such as linked images and iframes -->
<!--         don't render correctly.  Use your own hosted content   -->
<!--         if you need that functionality                         -->

<div style="width: 300px; height: 600px; float: left; display: block;">
    <textarea name="content" style="width:100%"></textarea>
    <div style="height: 30px; text-align:center; width: 100%;">
    <button id="save">Save</button>
    <button id="load">Load</button>
    </div>
    <div id="testImg"  ></div>    
</div>

<div id="output"></div>+

CSS

body {
    background-color: #000;
}
img {background-color: #008;}
#output {
    font-family: helvetica, arial, sans-serif;
    width: 600px;
    height: 600px;
    border: 3px solid #ddd;
    background-color: #f60;
    color: #000;
    float: left;
    margin: 10px;
    padding: 30px;
    font-size: 16px;
    text-align: center
}
#output h1 {
    font-size: 54px;
    color: #ff0;
    text-shadow: 2px 2px 0px #fa0;
    margin: auto;
}
#output p {
    padding: 10px;
    width: auto;
    box-shadow: -2px 2px 1px #000;
    font-family: Georgia;
    background-color: #fff;
    margin: 10px;
    float: left;
}
textarea {
    float:left;
    width: 500px;
    height: 200px;
}

button {
    display:block
    float: left;
    width: 50px;
    margin: 0px auto 20px;    
}

#testImg {
    width: 250px;
    height: 250px;
    display: block;
    border: 2px solid #fff;
    clear: left;
    margin: 25px auto;
}

JavaScript

function ajaxLoad() {
	    var ed = tinyMCE.get('content');
    ed.setContent('<div style="text-align: center"><h1>AWESOME PICTURE</h1><img width="150" height="150" src="http://jsfiddle.net/img/logo.png" /><br /><p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p></div>');
	}

	function ajaxSave() {
	    var ed = tinyMCE.get('content');
	    $('#output').empty().append(ed.getContent());
	    //$.ajax({});

	    var target = document.getElementById('output');

	    html2canvas(target, {
	        onrendered: function (canvas) {
			    var extra_canvas = document.createElement("canvas");
                extra_canvas.setAttribute('width',100);
                extra_canvas.setAttribute('height',100);
                var ctx = extra_canvas.getContext('2d');
                ctx.drawImage(canvas,0,0,canvas.width, canvas.height,0,0,100,100);
                var dataURL = extra_canvas.toDataURL();
                var img = $(document.createElement('img'));
                img.attr('src', dataURL);
                // insert the thumbnail at the top of the page
                $('#testImg').append(img);
	        }
	    });
	}


	$(document).ready(function () {
	    tinyMCE.init({
	        mode: "textareas",
	        theme: "modern",
	        plugins: "preview,media,charmap,textcolor,visualblocks,code",
	        toolbar: "preview,media,charmap,textcolor,visualblocks,code",
	        width: 300,
            height: 200
	    });
        $('#load').click(function() {
            ajaxLoad();
        });
        $('#save').click(function() {
            ajaxSave();
       ...