Adds download functionality.

Author: Michael Bleigh

index.html

@@ -92,16 +92,21 @@ <h1>Simple Example</h1>
       </article>
 
       <article class='example'>
-        <h1>Changing Color/Size</h1>
+        <h1>Changing Color/Size, Downloading Image</h1>
 
         <p>Sketch.js makes it very easy to create links that function as tool buttons.
         By default, any link that has a <code>href</code> tag that points to the ID
         of the converted canvas will automatically be considered a tool link. If the
         link has a <code>data-color</code> attribute then clicking it will change the color.
         Similarly, a <code>data-size</code> attribute will change the brush size.</p>
+
+        <p>Setting the <code>data-download</code> on a tool link to <code>jpeg</code> or
+        <code>png</code> will create a download button for the specified format.</p>
 
         <div class='demo'>
-          <div id='colors_tools'></div>
+          <div id='colors_tools'>
+            <a href='#colors_sketch' data-download='png' style='float: right; width: 100px;'>Download</a>
+          </div>
           <canvas id='colors_sketch' width='800' height='300'></canvas>
           <script type='text/javascript'>
             $(function() {

src/sketch.coffee

@@ -31,6 +31,9 @@ Released under the MIT License
         $(this).data('sketch').color = color
       @canvas.bind 'sketch.changesize', (e, size)->
         $(this).data('sketch').size = size
+      @canvas.bind 'sketch.download', (e, format)->
+        $(this).data('sketch').download(format)
+
       @canvas.bind 'mousedown mouseup mousemove mouseleave mouseout touchstart touchmove touchend touchcancel', @onEvent
 
       if @options.toolLinks
@@ -41,6 +44,8 @@ Released under the MIT License
             $canvas.trigger 'sketch.changecolor', $(this).attr('data-color')
           if $this.attr('data-size')
             $canvas.trigger 'sketch.changesize', parseFloat($(this).attr('data-size'))
+          if $(this).attr('data-download')
+            $canvas.trigger 'sketch.download', $(this).attr('data-download')
           false
 
 
@@ -93,6 +98,16 @@ Released under the MIT License
         $.sketch.tools[this.tool].draw.call sketch, this
       $.sketch.tools[@action.tool].draw.call sketch, @action if @painting && @action
 
+    download: (filename, format)->
+      format or= "png"
+      format = "jpeg" if format == "jpg"
+      mime = "image/#{format}"
+
+      imgData = @el.toDataURL(mime)
+      imgData = imgData.replace(mime, "image/octet-stream")
+
+      document.location.href = imgData
+
   $.sketch.tools.marker =
     draw: (action)->
       @context.lineJoin = "round"

src/sketch.js

@@ -32,6 +32,9 @@ Released under the MIT License
       this.canvas.bind('sketch.changesize', function(e, size) {
         return $(this).data('sketch').size = size;
       });
+      this.canvas.bind('sketch.download', function(e, format) {
+        return $(this).data('sketch').download(format);
+      });
       this.canvas.bind('mousedown mouseup mousemove mouseleave mouseout touchstart touchmove touchend touchcancel', this.onEvent);
       if (this.options.toolLinks) {
         $('body').delegate("a[href=\"#" + (this.canvas.attr('id')) + "\"]", 'click', function(e) {
@@ -44,6 +47,9 @@ Released under the MIT License
           if ($this.attr('data-size')) {
             $canvas.trigger('sketch.changesize', parseFloat($(this).attr('data-size')));
           }
+          if ($(this).attr('data-download')) {
+            $canvas.trigger('sketch.download', $(this).attr('data-download'));
+          }
           return false;
         });
       }
@@ -111,6 +117,17 @@ Released under the MIT License
         return $.sketch.tools[this.action.tool].draw.call(sketch, this.action);
       }
     };
+    Sketch.prototype.download = function(filename, format) {
+      var imgData, mime;
+      format || (format = "png");
+      if (format === "jpg") {
+        format = "jpeg";
+      }
+      mime = "image/" + format;
+      imgData = this.el.toDataURL(mime);
+      imgData = imgData.replace(mime, "image/octet-stream");
+      return document.location.href = imgData;
+    };
     return Sketch;
   })();
   $.sketch.tools.marker = {