In this article I will explain with an example, how to save HTML5 Drawing as Image using Canvas toDataURL function.
The drawing will be done using the jQuery Sketch plugin’s HTML5 Canvas Sketchpad (Drawing) App and later the drawing will be saved as an Image using the HTML5 Canvas toDataURL function.
HTML Markup
The HTML Markup consists of an HTML DIV consisting of two HTML Anchor elements for selecting Pen and Eraser for the HTML5 Canvas Sketchpad and an HTML5 Canvas element.
Below the HTML5 Canvas element, there’s an HTML Button and an Image element.
<div class="tools">
<a href="#colors_sketch" data-tool="marker">Marker</a> <a href="#colors_sketch" data-tool="eraser">
Eraser</a>
</div>
<br />
<canvas id="colors_sketch" width="500" height="200">
</canvas>
<br />
<br />
<input type="button" id="btnSave" value="Save as Image" />
<hr />
<img id = "imgCapture" alt = "" style = "display:none;border:1px solid #ccc" />
Implementing HTML5 Canvas Sketchpad (Drawing) App and Saving Drawing as Image using jQuery
Inside the jQuery document ready event handler, the jQuery HTML5 Sketch plugin is applied to the HTML5 Canvas element.
Both the HTML Anchor elements are assigned an HTML click event handler to highlight the selected element.
The HTML Button has been assigned a jQuery click event handler and when the Button is clicked the HTML5 Canvas Drawing is converted to a Base64 string using the HTML5 Canvas toDataURL function and then assigned as source to the HTML Image element.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/mobomo/sketch.js/master/lib/sketch.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#colors_sketch').sketch();
$(".tools a").eq(0).attr("style", "color:#000");
$(".tools a").click(function () {
$(".tools a").removeAttr("style");
$(this).attr("style", "color:#000");
});
$("#btnSave").bind("click", function () {
var base64 = $('#colors_sketch')[0].toDataURL();
$("#imgCapture").attr("src", base64);
$("#imgCapture").show();
});
});
</script>
Screenshot
![Save HTML5 Drawing as Image using Canvas toDataURL function]()
Demo
Downloads
