Merge pull request #92 from jasonday/canvas

Experimental fix for copying canvas content.

Author: oculus42

README.md

@@ -6,39 +6,100 @@ Printing plug-in for jQuery
 * Preserve page CSS/styling
 ** or add new CSS; the world is your oyster!
 * Preserve form entries
-
-### Non-features
-really 'Issues'
-* canvas/svg elements such as map routes are not preserved
+* **1.9.0 adds experimental canvas support**
 
 ## Usage
 ### Basic
 ```javascript
-    $('selector').printThis();
+$('selector').printThis();
+```
+
+### Advanced Features
+```javascript
+$('#kitty-one, #kitty-two, #kitty-three').printThis({
+    importCSS: false,
+    loadCSS: "",
+    header: "<h1>Look at all of my kitties!</h1>"
+});
+```
+
+#### debug
+Debug leaves the iframe visible on the page after `printThis` runs, allowing you to inspect the markup and CSS.
+
+#### importCSS
+Copy CSS `<link>` tags to the printThis iframe. On by default.
+
+#### importStyle
+Copy CSS `<style>` tags to the printThis iframe. Off by default.
+
+#### printContainer
+Includes the markup of the selected container, not just its contents. On by default.
+
+#### loadCSS
+Provide a URL for an additional stylesheet to the printThis iframe. Empty string (off) by default.
+
+#### pageTitle
+Use a custom page title on the iframe. This may be reflected on the printed page, depending on settings. Blank by default.
+
+#### removeInline
+Eliminates any inline style attributes from the content. Off by default.
+
+#### printDelay
+The amount of time to wait before calling `print()` in the printThis iframe. Defaults to 333 milliseconds.
+Appropriate values depend heavily on the content and network performance. Graphics heavy, slow, or uncached content may need extra time to load.
+
+#### header & footer
+A string or jQuery object to prepend or append to the printThis iframe content. `null` by default. 
+
+```javascript
+$('#mySelector').printThis({
+    header: "<h1>Amazing header</h1>"
+});
+ 
+$('#mySelector').printThis({
+    footer: $('.hidden-print-header-content')
+});
 ```
 
-### Advanced
-    $('#kitty-one, #kitty-two, #kitty-three').printThis({
-        importCSS: false,
-        loadCSS: "",
-        header: "<h1>Look at all of my kitties!</h1>"
-    });
+#### base
+The `base` option allows several behaviors.
+By default it is `false`, meaning a the current document will be set as the base URL.  
+
+If set to `true`, a `<base>` attribute will be set if one exists on the page. 
+If none is found, the tag is omitted, which may be suitable for pages with Fully Qualified URLs.
+
+When passed as a string, it will be used as the `href` attribute of a `<base>` tag.
+
+#### formValues
+This setting attempts to copy the current values of form elements into the printThis iframe. On by default.
+
+Complex field values, such as those containing quotations or mark-up, may have difficulties. Please report any unexpected behavior.
+
+#### canvas -- Experimental
+As of 1.9.0 you may be able to duplicate canvas elements to the printThis iframe. Disabled by default.
+This has received only limited testing and so may not work in all browsers and situations.
+
+#### doctypeString
+A doctype string to use on the printThis iframe. Defaults to the HTML5 doctype.
 
 ### All Options
 ```javascript
-    $("#mySelector").printThis({
-        debug: false,               * show the iframe for debugging
-        importCSS: true,            * import page CSS
-        importStyle: false,         * import style tags
-        printContainer: true,       * grab outer container as well as the contents of the selector
-        loadCSS: "path/to/my.css",  * path to additional css file - use an array [] for multiple
-        pageTitle: "",              * add title to print page
-        removeInline: false,        * remove all inline styles from print elements
-        printDelay: 333,            * variable print delay; depending on complexity a higher value may be necessary
-        header: null,               * prefix to html
-        base: false                 * preserve the BASE tag, or accept a string for the URL
-        formValues: true            * preserve input/form values
-    });
+$("#mySelector").printThis({
+    debug: false,               * show the iframe for debugging
+    importCSS: true,            * import page CSS
+    importStyle: false,         * import style tags
+    printContainer: true,       * grab outer container as well as the contents of the selector
+    loadCSS: "path/to/my.css",  * path to additional css file - use an array [] for multiple
+    pageTitle: "",              * add title to print page
+    removeInline: false,        * remove all inline styles from print elements
+    printDelay: 333,            * variable print delay; depending on complexity a higher value may be necessary
+    header: null,               * prefix to html
+    footer: null,               * postfix to html
+    base: false                 * preserve the BASE tag, or accept a string for the URL
+    formValues: true            * preserve input/form values
+    canvas: false               * copy canvas elements (experimental)
+    doctypeString: "..."        * enter a different doctype for older markup
+});
 ```
 
 ## Please read

changelog.txt

@@ -1,3 +1,7 @@
+01/16/2017    Added experimental canvas copy support.
+              Added detailed descriptions of advanced options to README
+              Bumped to 1.9.0 for new feature (canvas).
+
 01/16/2017    Added footer as proposed in 2015 by @RomainGehrig
               Bumped version to 1.8.0 for new feature
               Corrected 1.7.1 changelog date to 01/15/2017

package.json

@@ -1,6 +1,6 @@
 {
     "name": "print-this",
-    "version": "1.8.0",
+    "version": "1.9.0",
     "description": "Printing plug-in for jQuery",
     "main": "printThis.js",
     "dependencies": {

printThis.jquery.json

@@ -1,6 +1,6 @@
 {
   "name": "printThis",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "title": "printThis",
   "description": "Printing plug-in for jQuery. Print specific page elements, add print options, maintain or add new styling using jQuery.",
   "author": {

printThis.js

@@ -1,5 +1,5 @@
 /*
- * printThis v1.8.0
+ * printThis v1.9.0
  * @desc Printing plug-in for jQuery
  * @author Jason Day
  *
@@ -28,6 +28,8 @@
  *      footer: null,               * postfix to html
  *      base: false,                * preserve the BASE tag, or accept a string for the URL
  *      formValues: true            * preserve input/form values
+ *      canvas: false               * copy canvas elements (experimental)
+ *      doctypeString: '...'        * enter a different doctype for older markup
  *  });
  *
  * Notes:
@@ -45,7 +47,7 @@
         if (window.location.hostname !== document.domain && navigator.userAgent.match(/msie/i)) {
             // Ugly IE hacks due to IE not inheriting document.domain from parent
             // checks if document.domain is set by comparing the host name against document.domain
-            var iframeSrc = "javascript:document.write(\"<head><script>document.domain=\\\"" + document.domain + "\\\";</script></head><body></body>\")";
+            var iframeSrc = "javascript:document.write(\"<head><script>document.domain=\\\"" + document.domain + "\\\";</s" + "cript></head><body></body>\")";
             var printI = document.createElement('iframe');
             printI.name = "printIframe";
             printI.id = strFrameName;
@@ -71,7 +73,6 @@
             top: "-600px"
         });
 
-
         // $iframe.ready() and $iframe.load were inconsistent between browsers    
         setTimeout(function() {
 
@@ -140,6 +141,14 @@
             // print header
             if (opt.header) $body.append(opt.header);
 
+            if (opt.canvas) {
+                // add canvas data-ids for easy access after the cloning.
+                var canvasId = 0;
+                $element.find('canvas').each(function(){
+                    $(this).attr('data-printthis', canvasId++);
+                });
+            }
+
             // grab $.selector as container
             if (opt.printContainer) $body.append($element.outer());
 
@@ -148,6 +157,19 @@
                 $body.append($(this).html());
             });
 
+            if (opt.canvas) {
+                // Re-draw new canvases by referencing the originals
+                $body.find('canvas').each(function(){
+                    var cid = $(this).data('printthis'),
+                        $src = $('[data-printthis="' + cid + '"]');
+
+                    this.getContext('2d').drawImage($src[0], 0, 0);
+
+                    // Remove the mark-up from the original
+                    $src.removeData('printthis');
+                });
+            }
+
             // capture form/field values
             if (opt.formValues) {
                 // loop through inputs
@@ -215,7 +237,7 @@
                     // check if the iframe was created with the ugly hack
                     // and perform another ugly hack out of neccessity
                     window.frames["printIframe"].focus();
-                    $head.append("<script>  window.print(); </script>");
+                    $head.append("<script>  window.print(); </s" + "cript>");
                 } else {
                     // proper method
                     if (document.queryCommandSupported("print")) {
@@ -252,12 +274,13 @@
         header: null,           // prefix to html
         footer: null,           // postfix to html
         formValues: true,       // preserve input/form values
+        canvas: false,          // Copy canvas content (experimental)
         base: false,            // preserve the BASE tag, or accept a string for the URL
         doctypeString: '<!DOCTYPE html>' // html doctype
     };
 
     // $.selector container
     jQuery.fn.outer = function() {
-        return $($("<div></div>").html(this.clone())).html()
+        return $($("<div></div>").html(this.clone())).html();
     }
 })(jQuery);