feat(core): replace html2canvas with canvg

html2canvas couldn't convert our map svg layers in a canvas in IE11. Switched to using canvg. Accidentally, it's much faster now. Win-win! Signed-off-by: Aleksuei Riabtsev <aleksuei.riabtsev@ec.gc.ca>
RAMP-PCAR · Jul 6, 2015 · c0b0f16 · c0b0f16
1 parent c1f643c
commit c0b0f16
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 9 deletions.
diff --git a/bower.json b/bower.json
@@ -54,7 +54,7 @@
         "fileSaver": "https://github.com/eligrey/FileSaver.js.git#master",
         "blob": "https://github.com/eligrey/Blob.js.git#master",
         "canvasToBlob": "https://github.com/eligrey/canvas-toBlob.js.git#master",
-        "html2canvas": "https://github.com/niklasvh/html2canvas.git#0.5.0-alpha1"
+        "canvg": "~1.3.0"
     },
     "moduleType": [
         "globals"

diff --git a/package.json b/package.json
@@ -110,7 +110,7 @@
                 "blob/Blob.js",
                 "canvasToBlob/canvas-toBlob.js",
                 "fileSaver/FileSaver.js",
-                "html2canvas/dist/html2canvas.js"
+                "canvg/dist/canvg.bundle.js"
             ],
             "cssLib": [
                 "animate.css/animate.css",

diff --git a/site/includes/mapexport.hbs b/site/includes/mapexport.hbs
@@ -5,7 +5,8 @@
             <div class="map-export-preview">
                 <div class="map-export-image">
                     <img class="remote blurred-5" src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=" crossorigin="anonymous" alt="">
-                    <img class="local blurred-5" src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=" alt="">
+                    <!--<img class="local blurred-5" src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=" alt="">-->
+                    <canvas class="local blurred-5"></canvas>
                 </div>
                 <div class="map-export-stretcher" role="presentation">
                     <div class="map-export-notice-container">

diff --git a/src/css/toolbar/map-export.less b/src/css/toolbar/map-export.less
@@ -121,8 +121,9 @@
         left: 15px;
         overflow: hidden;
         //padding: 1px;
-        img {
-            width: 100%;
+        img, canvas {
+            width: 100% !important;
+            height: 100% !important;
 
             &.local {
                 position: absolute;

diff --git a/src/js/RAMP/Modules/imageExport.js b/src/js/RAMP/Modules/imageExport.js
@@ -1,4 +1,4 @@
-/* global define, console, RAMP, $, TimelineLite, window, saveAs, html2canvas */
+/* global define, console, RAMP, $, TimelineLite, window, saveAs, canvg, XMLSerializer */
 
 /**
 *
@@ -145,7 +145,27 @@ define([
                             dLocal = new Deferred();
                             promiseLocal = dLocal.promise;
 
-                            html2canvas($("#mainMap_layers"), {
+                            var //canvasNode = document.createElement('canvas'),
+                                serializer = new XMLSerializer(),
+                                svgtext;
+
+                            svgtext = serializer.serializeToString($("#mainMap_gc")[0]);
+                            canvg(mapExportImgLocal[0], svgtext, {
+                                renderCallback: function () {
+                                    //show image with local canvas
+                                    mapExportImgLocal
+                                        //.attr({ src: c.toDataURL(), class: 'local' })
+                                        .attr({ class: 'local' })
+                                        .css({ display: 'block' })
+                                    ;
+
+                                    localCanvas = mapExportImgLocal[0];
+
+                                    dLocal.resolve();
+                                }
+                            });
+
+                            /*html2canvas($("#mainMap_layers"), {
                                 onrendered: function (c) {
                                     localCanvas = c;
 
@@ -157,7 +177,7 @@ define([
 
                                     dLocal.resolve();
                                 }
-                            });
+                            });*/
                         }
 
                         // wait for the image to fully load
@@ -233,7 +253,7 @@ define([
 
                     mapExportToggle = $("#map-export-toggle");
                     mapExportStretcher = $(".map-export-stretcher");
-                    mapExportImgLocal = $(".map-export-image > img.local");
+                    mapExportImgLocal = $(".map-export-image > canvas.local");
                     mapExportImg = $(".map-export-image > img.remote");
                     mapExportSpinner = $(".map-export-preview .loading-simple");