Map Export with PNGW & PRJ files by ThomasG77

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Map Export with PNGW &amp; PRJ files</title>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css">
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <style type="text/css">
      html, body {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      #map {
        height: 80%;
      }
    </style>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> Download PNG</a>
    <script>
      // this example uses FileSaver.js for which we don't have an externs file.
      var view = new ol.View({
        center: ol.proj.fromLonLat([
          10.458984374999991,
          41.96765920367818
        ]),
        zoom: 2
      });

      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          new ol.layer.Vector({
            source: new ol.source.Vector({
              url: 'https://openlayers.org/en/v4.6.5/examples/data/geojson/countries.geojson',
              format: new ol.format.GeoJSON()
            })
          })
        ],
        target: 'map',
        controls: ol.control.defaults({
          attributionOptions: {
            collapsible: false
          }
        }),
        view: view
      });

      document.getElementById('export-png').addEventListener('click', function() {
        map.once('postcompose', function(event) {
          var canvas = event.context.canvas;

          var zip = new JSZip();

          var currentResolution = view.getResolution();
          var currentExtent = view.calculateExtent(); // Return [minx, miny, maxx, maxy]
          var pngwContent = [
            currentResolution,
            0,
            0,
            -currentResolution,
            currentExtent[0] + currentResolution / 0.5,
            currentExtent[3] - currentResolution / 0.5
          ].join('\n');
          // Add an top-level, arbitrary text file with contents
          zip.file("map.pngw", pngwContent);
          zip.file("map.prj", 'PROJCS["WGS 84 / Pseudo-Mercator",GEOGCS["WGS 84",DATUM["WGS_1984",SPHEROID["WGS 84",6378137,298.257223563,AUTHORITY["EPSG","7030"]],AUTHORITY["EPSG","6326"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4326"]],PROJECTION["Mercator_1SP"],PARAMETER["central_meridian",0],PARAMETER["scale_factor",1],PARAMETER["false_easting",0],PARAMETER["false_northing",0],UNIT["metre",1,AUTHORITY["EPSG","9001"]],AXIS["X",EAST],AXIS["Y",NORTH],EXTENSION["PROJ4","+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs"],AUTHORITY["EPSG","3857"]]');

          // Add a file to the directory, in this case an image with data URI as contents
          if (navigator.msSaveBlob) {
            zip.file("map.png", canvas.msToBlob(), {base64: true});
            zip.generateAsync({type:"blob"})
            .then(function(content) {
                // Force down of the Zip file
                saveAs(content, "archive.zip");
            })
          } else {
            canvas.toBlob(function(blob) {
              // debugger;
              zip.file("map.png", blob, {base64: true});
              zip.generateAsync({type:"blob"})
              .then(function(content) {
                  // Force down of the Zip file
                  saveAs(content, "archive.zip");
              })
            });
          }

        });
        map.renderSync();
      });
    </script>
  </body>
</html>