clean copy of #97 full resolution download (#100)

* Fix CI

* clean copy of #97 full res output

* adjustments to changes by @John905

* mostly working

* Update DistortableImage.Edit.js

* working full-res distortion!

* moved file

* version bump

* README updates

* fixes

* build

* more docs

* Minor additional fixes

* jpg/png errors

.npmignore

@@ -0,0 +1 @@
+examples/large.jpg

Gruntfile.js

@@ -27,6 +27,7 @@ module.exports = function(grunt) {
                     L: false,
                     $: false,
                     LeafletToolbar: false,
+                    warpWebGl: false,
 
                     // Mocha
 

README.md

@@ -23,17 +23,56 @@ Here's a screenshot:
 
 ![screenshot](example.png)
 
+## Demo
+
 Check out this [simple demo](https://publiclab.github.io/Leaflet.DistortableImage/examples/index.html).
 
 And watch this GIF demo:
 
 ![demo gif](https://raw.githubusercontent.com/publiclab/mapknitter/master/public/demo.gif)
 
-
-Download as zip or clone to get a copy of the Repo.
-
 To test the code, open `index.html` in your browser and click and drag the markers on the edges of the image. The image will show perspectival distortions.
 
+## Usage
+
+```js
+// basic Leaflet map setup
+map = new L.map('map').setView([51.505, -0.09], 13);
+L.tileLayer('https://{s}.tiles.mapbox.com/v3/anishshah101.ipm9j6em/{z}/{x}/{y}.png', {
+  maxZoom: 18,
+  attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
+    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
+    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
+  id: 'examples.map-i86knfo3'
+}).addTo(map);
+
+// create an image
+img = new L.DistortableImageOverlay(
+  'example.png', {
+    corners: [
+      new L.latLng(51.52,-0.10),
+      new L.latLng(51.52,-0.14),
+      new L.latLng(51.50,-0.10),
+      new L.latLng(51.50,-0.14)
+    ],
+    fullResolutionSrc: 'large.jpg' // optionally pass in a higher resolution image to use in full-res exporting
+  }
+).addTo(map);
+
+L.DomEvent.on(img._image, 'load', img.editing.enable, img.editing); // enable editing
+
+```
+
+## Full-resolution download
+
+We've added a GPU-accelerated means to generate a full resolution version of the distorted image; it requires two additional dependencies to enable; see how we've included them in the demo:
+
+
+```
+<script src="../node_modules/webgl-distort/dist/webgl-distort.js"></script>
+<script src="../node_modules/glfx-js/dist/glfx.js"></script>
+```
+
 ****
 
 ## Setup

dist/leaflet.distortableimage.js

@@ -636,6 +636,25 @@ var EditOverlayAction = LeafletToolbar.ToolbarAction.extend({
 			editing._toggleRotateDistort();
 			this.disable();
 		}
+	}),
+
+
+	ToggleExport = EditOverlayAction.extend({
+		options: {
+			toolbarIcon: {
+				html: '<span class="fa fa-download"></span>',
+				tooltip: 'Export Image',
+				title: 'Export Image'
+			}
+		},
+
+		addHooks: function ()
+		{
+			var editing = this._overlay.editing;
+
+			editing._toggleExport();
+			this.disable(); 
+		}
 	});
 
 L.DistortableImage.EditToolbar = LeafletToolbar.Popup.extend({
@@ -645,7 +664,8 @@ L.DistortableImage.EditToolbar = LeafletToolbar.Popup.extend({
 			RemoveOverlay,
 			ToggleOutline,
 			ToggleEditable,
-			ToggleRotateDistort
+			ToggleRotateDistort,
+			ToggleExport
 		]
 	}
 });
@@ -658,6 +678,7 @@ L.DistortableImage.Edit = L.Handler.extend({
 		outline: '1px solid red',
 		keymap: {
 			68: '_toggleRotateDistort', // d
+			69: '_toggleIsolate', // e
 			73: '_toggleIsolate', // i
 			76: '_toggleLock', // l
 			79: '_toggleOutline', // o
@@ -901,6 +922,65 @@ L.DistortableImage.Edit = L.Handler.extend({
 		L.DomEvent.stopPropagation(event);
 	},
 
+
+	// Based on https://github.com/publiclab/mapknitter/blob/8d94132c81b3040ae0d0b4627e685ff75275b416/app/assets/javascripts/mapknitter/Map.js#L47-L82
+	_toggleExport: function (){
+		var map = this._overlay._map; 
+		var overlay = this._overlay;
+
+		// make a new image
+		var downloadable = new Image();
+
+		downloadable.id = downloadable.id || "tempId12345";
+		$('body').append(downloadable);
+
+		downloadable.onload = function onLoadDownloadableImage() {
+
+			var height = downloadable.height,
+				width = downloadable.width,
+				nw = map.latLngToLayerPoint(overlay._corners[0]),
+				ne = map.latLngToLayerPoint(overlay._corners[1]),
+				sw = map.latLngToLayerPoint(overlay._corners[2]),
+				se = map.latLngToLayerPoint(overlay._corners[3]);
+
+			// I think this is to move the image to the upper left corner, 
+			// jywarren: i think we may need these or the image goes off the edge of the canvas
+                        // jywarren: but these seem to break the distortion math... 
+
+			// jywarren: i think it should be rejiggered so it 
+			// finds the most negative values of x and y and then
+			// adds those to all coordinates
+
+			//nw.x -= nw.x;
+			//ne.x -= nw.x;
+			//se.x -= nw.x;
+			//sw.x -= nw.x;
+
+			//nw.y -= nw.y;
+			//ne.y -= nw.y;
+			//se.y -= nw.y;
+			//sw.y -= nw.y;
+
+			// run once warping is complete
+       			downloadable.onload = function() {
+				$(downloadable).remove();
+			};
+
+			if (window && window.hasOwnProperty('warpWebGl')) {
+				warpWebGl(
+					downloadable.id,
+					[0, 0, width, 0, width, height, 0, height],
+					[nw.x, nw.y, ne.x, ne.y, se.x, se.y, sw.x, sw.y],
+					true // trigger download
+				);
+			}
+
+		};
+
+		downloadable.src = overlay.options.fullResolutionSrc || overlay._image.src;
+
+	},
+
 	toggleIsolate: function() {
 		// this.isolated = !this.isolated;
 		// if (this.isolated) {

examples/index.html

@@ -12,6 +12,11 @@
   <script src="../node_modules/leaflet-toolbar/dist/leaflet.toolbar.js"></script>
   <link href="../node_modules/leaflet-toolbar/dist/leaflet.toolbar.css" rel="stylesheet"/>
 
+  <!-- for full-res export -->
+  <script src="../node_modules/jquery/dist/jquery.js"></script>
+  <script src="../node_modules/webgl-distort/dist/webgl-distort.js"></script>
+  <script src="../node_modules/glfx/glfx.js"></script>
+
   <link rel="stylesheet" href="../dist/leaflet.distortableimage.css" type="text/css" media="screen" title="no title" charset="utf-8">
   <script src="../dist/leaflet.distortableimage.js"></script>
 </head>
@@ -41,18 +46,19 @@
 
       // create an image
       img = new L.DistortableImageOverlay(
-        'example.jpg', {
+        'example.png', {
           corners: [
             new L.latLng(51.52,-0.10),
             new L.latLng(51.52,-0.14),
             new L.latLng(51.50,-0.10),
             new L.latLng(51.50,-0.14)
-          ]
+          ],
+          fullResolutionSrc: 'large.jpg'
         }
       ).addTo(map);
 
       L.DomEvent.on(img._image, 'load', img.editing.enable, img.editing);
     })();
   </script>
-      
+
 </html>

examples/listeners.html

@@ -12,6 +12,11 @@
   <script src="../node_modules/leaflet-toolbar/dist/leaflet.toolbar.js"></script>
   <link href="../node_modules/leaflet-toolbar/dist/leaflet.toolbar.css" rel="stylesheet"/>
 
+  <!-- for full-res export -->
+  <script src="../node_modules/jquery/dist/jquery.js"></script>
+  <script src="../node_modules/webgl-distort/dist/webgl-distort.js"></script>
+  <script src="../node_modules/glfx-js/dist/glfx.js"></script>
+
   <link rel="stylesheet" href="../dist/leaflet.distortableimage.css" type="text/css" media="screen" title="no title" charset="utf-8">
   <script src="../dist/leaflet.distortableimage.js"></script>
 </head>

examples/select.html

@@ -12,6 +12,11 @@
   <script src="../node_modules/leaflet-toolbar/dist/leaflet.toolbar.js"></script>
   <link href="../node_modules/leaflet-toolbar/dist/leaflet.toolbar.css" rel="stylesheet"/>
 
+  <!-- for full-res export -->
+  <script src="../node_modules/jquery/dist/jquery.js"></script>
+  <script src="../node_modules/webgl-distort/dist/webgl-distort.js"></script>
+  <script src="../node_modules/glfx-js/dist/glfx.js"></script>
+
   <link rel="stylesheet" href="../dist/leaflet.distortableimage.css" type="text/css" media="screen" title="no title" charset="utf-8">
   <script src="../dist/leaflet.distortableimage.js"></script>
 </head>