From 92bd1d67a82ed2b2a4e0de3c0fedac86493363ff Mon Sep 17 00:00:00 2001
From: Frederic Junod <frederic.junod@camptocamp.com>
Date: Mon, 17 Oct 2016 08:50:54 +0200
Subject: [PATCH] Use FileSaver.js in export-map example

Instead of relying on the download attribute.
---
 examples/.eslintrc       |  1 +
 examples/export-map.html |  8 +++-----
 examples/export-map.js   | 26 ++++++++++----------------
 3 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/examples/.eslintrc b/examples/.eslintrc
index 25ed49663a..99636a475a 100644
--- a/examples/.eslintrc
+++ b/examples/.eslintrc
@@ -7,6 +7,7 @@
     "d3": false,
     "jsPDF": false,
     "jsts": false,
+    "saveAs": false,
     "topojson": false,
     "turf": false
   },
diff --git a/examples/export-map.html b/examples/export-map.html
index aea92bb3f7..ced0c13637 100644
--- a/examples/export-map.html
+++ b/examples/export-map.html
@@ -5,10 +5,8 @@ shortdesc: Example of exporting a map as a PNG image.
 docs: >
   Example of exporting a map as a PNG image.
 tags: "export, png, openstreetmap"
+resources:
+  - https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js
 ---
 <div id="map" class="map"></div>
-<div id="no-download" class="alert alert-danger" style="display: none">
-  This example requires a browser that supports the
-  <a href="http://caniuse.com/#feat=download">link download</a> attribute.
-</div>
-<a id="export-png" class="btn btn-default" download="map.png"><i class="fa fa-download"></i> Download PNG</a>
+<a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> Download PNG</a>
diff --git a/examples/export-map.js b/examples/export-map.js
index ccb95959c3..3b71e84439 100644
--- a/examples/export-map.js
+++ b/examples/export-map.js
@@ -1,3 +1,5 @@
+// NOCOMPILE
+// this example uses FileSaver.js for which we don't have an externs file.
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.control');
@@ -31,20 +33,12 @@ var map = new ol.Map({
   })
 });
 
-var exportPNGElement = document.getElementById('export-png');
-
-if ('download' in exportPNGElement) {
-  exportPNGElement.addEventListener('click', function() {
-    map.once('postcompose', function(event) {
-      var canvas = event.context.canvas;
-      exportPNGElement.href = canvas.toDataURL('image/png');
+document.getElementById('export-png').addEventListener('click', function() {
+  map.once('postcompose', function(event) {
+    var canvas = event.context.canvas;
+    canvas.toBlob(function(blob) {
+      saveAs(blob, 'map.png');
     });
-    map.renderSync();
-  }, false);
-} else {
-  var info = document.getElementById('no-download');
-  /**
-   * display error message
-   */
-  info.style.display = '';
-}
+  });
+  map.renderSync();
+});