fix: svg firefox + svg image

infra-geo-ouverte · Dec 2, 2016 · 71ba31f · 71ba31f
1 parent ada5dbe
commit 71ba31f
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 6 deletions.
diff --git a/bower.json b/bower.json
@@ -21,6 +21,9 @@
     "handlebars": "~3.0.0",
     "r.js": "[email protected]:jrburke/r.js.git#2.1.18",
     "html2canvas": "0.5.0-beta4",
+    "canvg": "http://canvg.github.io/canvg/canvg.js",
+    "rgbcolor": "http://canvg.github.io/canvg/rgbcolor.js",
+    "StackBlur": "http://canvg.github.io/canvg/StackBlur.js",
     "es6-promise": "~3.1.2"
   }
 }
diff --git a/interfaces/navigateur/app/views/partials/requireConfig.volt b/interfaces/navigateur/app/views/partials/requireConfig.volt
@@ -40,6 +40,9 @@ options.requireConfigFct = function(version, debug){
             jquery: debug ? "{{this.config.uri.librairies}}/jquery/jquery" : "{{this.config.uri.librairies}}/jquery/jquery.min",
             html2canvas: "{{this.config.uri.librairies}}/html2canvas/dist/html2canvas",
             html2canvassvg: "{{this.config.uri.librairies}}/html2canvas/dist/html2canvas.svg",
+            rgbcolor: "{{this.config.uri.librairies}}/rgbcolor/index",
+            stackblur: "{{this.config.uri.librairies}}/StackBlur/index",
+            canvg: "{{this.config.uri.librairies}}/canvg/index",
             es6promise: "{{this.config.uri.librairies}}/es6-promise/es6-promise.min",
             proj4js: 'libs/proj/Proj4js',
             epsgDef: 'libs/proj/epsgDef',
@@ -52,6 +55,9 @@ options.requireConfigFct = function(version, debug){
             epsgDef: {
                 deps: ['proj4js']
             },
+            canvg: {
+                deps: ['rgbcolor', 'stackblur']
+            },
             Handlebars: {
                 exports: 'Handlebars'
             }

diff --git a/interfaces/navigateur/public/js/app/carte.js b/interfaces/navigateur/public/js/app/carte.js
@@ -8,7 +8,7 @@
  * @author Marc-André Barbeau, MSP
  * @version 1.0
  */
-define(['point', 'occurence', 'limites', 'gestionCouches', 'evenement', 'aide', 'contexteMenuCarte', 'html2canvas', 'html2canvassvg', 'es6promise', 'libs/extension/OpenLayers/fixOpenLayers'], function(Point, Occurence, Limites, GestionCouches, Evenement, Aide, ContexteMenuCarte, html2canvas, html2canvassvg) {
+define(['point', 'occurence', 'limites', 'gestionCouches', 'evenement', 'aide', 'browserDetect', 'contexteMenuCarte', 'html2canvas', 'html2canvassvg', 'canvg', 'es6promise', 'libs/extension/OpenLayers/fixOpenLayers'], function(Point, Occurence, Limites, GestionCouches, Evenement, Aide, BrowserDetect, ContexteMenuCarte, html2canvas, html2canvassvg) {
     /**
      * Création de l'object Carte.
      * @constructor
@@ -290,19 +290,24 @@ define(['point', 'occurence', 'limites', 'gestionCouches', 'evenement', 'aide',
      * @return {Canvas} Une version canvas de la carte
      */
     Carte.prototype.exporterCanvas = function() {
+        var that = this;
         var deferred = jQuery.Deferred();
         var options = {
-            useCORS: true,
-            allowTaint: false,
-            proxy: Aide.obtenirConfig('uri.api') + '/proxy/html2canvas'
+             useCORS: true,
+             allowTaint: true
         };
 
         // Correctif pour support Internet Explorer et RequireJS
         html2canvas.svg = html2canvassvg;
         window.html2canvas = html2canvas;
 
-        html2canvas(this._carteOL.div, options).then(function(canvas) {
-            deferred.resolve(canvas);
+        var carteDiv = this._carteOL.div;
+        var $carteDiv = $(carteDiv);
+        this._canvasAddSvgFirefox($carteDiv);
+
+        html2canvas(carteDiv, options).then(function(canvas) {
+            that._canvasRemoveSvgFirefox($carteDiv);
+            that._canvasAddSvgImage($carteDiv, canvas, deferred);
         })
 
         return deferred.promise();
@@ -346,6 +351,71 @@ define(['point', 'occurence', 'limites', 'gestionCouches', 'evenement', 'aide',
         return deferred.promise();
     };
 
+
+    Carte.prototype._canvasAddSvgImage = function($div, canvas, deferred) {
+        var svgElements = $div.find("svg image");
+        var length = svgElements.length;
+        svgElements.each(function (k, svg) {
+            var source = new Image();
+            source.src = svg.getAttribute("xlink:href");
+            source.width = svg.getAttribute("width");
+            source.height = svg.getAttribute("height");
+            var ctx = canvas.getContext('2d'); 
+            source.onload = function(){
+                ctx.drawImage(source, Number(svg.getAttribute("x")), Number(svg.getAttribute("y")));
+                if (k >= length-1) {
+                    deferred.resolve(canvas);
+                }
+            }
+        });
+        if (length === 0) {
+            deferred.resolve(canvas);
+        }
+    };
+
+
+    Carte.prototype._canvasAddSvgFirefox = function($div) {
+        if (BrowserDetect.browser !== 'Firefox') {
+            return true;
+        }
+        var svgElements = $div.find("svg");
+
+        svgElements.each(function () {
+            var canvas, xml;
+
+            canvas = document.createElement("canvas");
+            canvas.className = "screenShotTempCanvas";
+            //convert SVG into a XML string
+            xml = (new XMLSerializer()).serializeToString(this);
+
+            // Removing the name space as IE throws an error
+            xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');
+
+            //draw the SVG onto a canvas
+            canvg(canvas, xml);
+            $(canvas).insertAfter(this);
+            //hide the SVG element
+            this.tempHide = true;
+            $(this).hide();
+        });
+    };
+
+    Carte.prototype._canvasRemoveSvgFirefox = function($div) {
+        if (BrowserDetect.browser !== 'Firefox') {
+            return true;
+        }
+        $div.find('.screenShotTempCanvas').remove();
+        $div.find('svg');
+        var svgElements = $div.find("svg");
+
+        svgElements.each(function () {
+            if (this.tempHide === true){
+                this.tempHide = false;
+                $(this).show();
+            }
+        });
+    }
+
     /**
      * Obtenir la projection de la carte. (Format EPSG)
      * @method