v1.6.1: Added full canvas support

README.md

@@ -126,7 +126,4 @@ Currently this plugin supports the following options:
 [CC-BY](http://creativecommons.org/licenses/by/3.0/).
 
 ## Demo
-[jQuery.print/demo](http://doersguild.github.io/jQuery.print/demo/)
-
----------------------------------------
-Like our [work](http://doersguild.com)? [Get in touch!](mailto:[email protected])
+[jQuery.print/demo](http://doersguild.github.io/jQuery.print/demo/)

bower.json

@@ -1,11 +1,8 @@
 {
     "name": "jQuery.print",
     "main": "dist/jQuery.print.min.js",
-    "version": "1.6.0",
+    "version": "1.6.1",
     "homepage": "https://doersguild.github.io/jQuery.print/",
-    "authors": [
-      "Sathvik P <[email protected]>"
-    ],
     "description": "Easy to use, Element Printing Plugin for jQuery, for printing specific parts of a page",
     "keywords": [
       "print",

demo/index.html

@@ -20,6 +20,13 @@
         .b {
             color: #aaa;
         }
+        #canvasExample {
+            height: 5em;
+            max-width:  100%;
+            border: 0.2em solid #777;
+            display: block;
+            margin-bottom: 1em;
+        }
         </style>
         <!--[if lt IE 9]>
         <script src="js/vendor/html5-3.6-respond-1.1.0.min.js"></script>
@@ -46,6 +53,8 @@ <h3>Element 2</h3>
                 <p>
                 Some other random text.
                 </p>
+                Canvas:
+                <canvas id="canvasExample"></canvas>
                 <button class="print-link no-print">
                 Print this ($.print("#ele2")) and skip the button (.no-print)
                 </button>
@@ -104,6 +113,12 @@ <h3 class='avoid-this'>Element 4</h3>
         <script type='text/javascript'>
         //<![CDATA[
         jQuery(function($) { 'use strict';
+            try {
+                var original = document.getElementById('canvasExample');
+                original.getContext('2d').fillRect(20, 20, 120, 120);
+            } catch (err) {
+                console.warn(err)
+            }
             $("#ele2").find('.print-link').on('click', function() {
                 //Print ele2 with default options
                 $.print("#ele2");
@@ -129,7 +144,6 @@ <h3 class='avoid-this'>Element 4</h3>
                     deferred: $.Deferred().done(function() { console.log('Printing done', arguments); })
                 });
             });
-            // Fork https://github.com/sathvikp/jQuery.print for the full list of options
         });
         //]]>
         </script>

jQuery.print.js

@@ -1,6 +1,5 @@
 /* @license 
- * jQuery.print, version 1.6.0
- *  (c) Sathvik Ponangi, Doers' Guild
+ * jQuery.print, version 1.6.1
  * Licence: CC-By (http://creativecommons.org/licenses/by/3.0/)
  *--------------------------------------------------------------------------*/
 (function ($) {
@@ -16,7 +15,9 @@
             $resultTextareas = $result.find('textarea').add($result.filter('textarea')),
             $mySelects       = $elmToClone.find('select').add($elmToClone.filter('select')),
             $resultSelects   = $result.find('select').add($result.filter('select')),
-            i, l, j, m;
+            $myCanvas       = $elmToClone.find('canvas').add($elmToClone.filter('canvas')),
+            $resultCanvas   = $result.find('canvas').add($result.filter('canvas')),
+            i, l, j, m, myCanvasContext;
 
         for (i = 0, l = $myTextareas.length; i < l; ++i) {
             $($resultTextareas[i]).val($($myTextareas[i]).val());
@@ -28,6 +29,14 @@
                 }
             }
         }
+        for (i = 0, l = $myCanvas.length; i < l; ++i) {
+            // https://stackoverflow.com/a/41242597
+            myCanvasContext = $myCanvas[i].getContext('2d');
+            if(myCanvasContext) {
+                $resultCanvas[i].getContext('2d').drawImage($myCanvas[i], 0,0);
+                $($resultCanvas[i]).attr("data-jquery-print", myCanvasContext.canvas.toDataURL());
+            }
+        }
         return $result;
     }
 
@@ -53,6 +62,19 @@
                 wdoc.write(options.doctype);
             }
             wdoc.write(content);
+            try {
+                var canvas = wdoc.querySelectorAll('canvas');
+                for(var i = 0; i < canvas.length; i++) {
+                    var ctx = canvas[i].getContext("2d");
+                    var image = new Image();
+                    image.onload = function() {
+                        ctx.drawImage(image, 0, 0);
+                    };
+                    image.src = canvas[i].getAttribute("data-jquery-print");
+                }
+            } catch (err) {
+                console.warn(err);
+            }
             wdoc.close();
             var printed = false,
                 callPrint = function () {
@@ -205,7 +227,7 @@
             $styles = $.merge($styles, $('<link rel="stylesheet" href="' + options.stylesheet + '">'));
         }
         // Create a copy of the element to print
-        var copy = jQueryCloneWithSelectAndTextAreaValues($this);
+        var copy = jQueryCloneWithSelectAndTextAreaValues($this, true, true);
         // Wrap it in a span to get the HTML markup string
         copy = $("<span/>")
             .append(copy);

package.json

@@ -2,11 +2,8 @@
   "name": "jQuery.print",
   "filename": "jQuery.print.min.js",
   "main": "jQuery.print.js",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "homepage": "https://doersguild.github.io/jQuery.print/",
-  "authors": [
-    "Sathvik P <[email protected]>"
-  ],
   "description": "Easy to use, Element Printing Plugin for jQuery, for printing specific parts of a page",
   "keywords": [
     "print",

yarn.lock

@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+jquery@>=1.7.2:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.0.tgz#c72a09f15c1bdce142f49dbf1170bdf8adac2470"
+  integrity sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==