From e205da0c27f432f72d3fdeebec1738c7106261c4 Mon Sep 17 00:00:00 2001 From: sashadev-sky Date: Tue, 27 Aug 2019 23:25:55 -0400 Subject: [PATCH 1/5] update dist --- dist/leaflet.distortableimage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dist/leaflet.distortableimage.js b/dist/leaflet.distortableimage.js index 7175d74e4..df6dd835d 100644 --- a/dist/leaflet.distortableimage.js +++ b/dist/leaflet.distortableimage.js @@ -3342,4 +3342,4 @@ L.Map.include({ return this; } -}); +}); \ No newline at end of file From 356943a2563f1a25805a78546c3d75c09772f779 Mon Sep 17 00:00:00 2001 From: sashadev-sky Date: Tue, 3 Sep 2019 00:11:55 -0400 Subject: [PATCH 2/5] Exif initial implementation --- Gruntfile.js | 1 + dist/leaflet.distortableimage.js | 196 +++++++++++--------- examples/index.html | 43 ++++- src/DistortableImageOverlay.js | 5 + src/edit/DistortableImage.Edit.js | 2 +- src/edit/getEXIFdata.js | 143 +++++++------- src/edit/tools/DistortableImage.PopupBar.js | 34 +++- test/karma.conf.js | 3 +- 8 files changed, 254 insertions(+), 173 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index af8642842..0193b5d53 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -28,6 +28,7 @@ module.exports = function(grunt) { warpWebGl: false, EXIF: false, alert: false, + confirm: false, // Mocha diff --git a/dist/leaflet.distortableimage.js b/dist/leaflet.distortableimage.js index b0f626fc7..77d538795 100644 --- a/dist/leaflet.distortableimage.js +++ b/dist/leaflet.distortableimage.js @@ -251,6 +251,7 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({ this.edgeMinWidth = this.options.edgeMinWidth; this.editable = this.options.editable; this._url = url; + this._fullResolutionSrc = options.fullResolutionSrc || url; this.rotation = 0; // window.rotation = this.rotation; }, @@ -580,6 +581,10 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({ return map.unproject(reduce.divideBy(4)); }, + _getFullResSrc: function() { + return this._fullResolutionSrc; + }, + // Use for translation calculations // for translation the delta for 1 corner applies to all 4 _calcCornerPointDelta: function() { @@ -886,89 +891,86 @@ L.distortableCollection = function(id, options) { return new L.DistortableCollection(id, options); }; -/* eslint-disable no-unused-vars */ -L.EXIF = function getEXIFdata(img) { +L.EXIF = function getEXIFdata(img, overlay) { + var GPS; + var lat; + var lng; if (Object.keys(EXIF.getAllTags(img)).length !== 0) { console.log(EXIF.getAllTags(img)); - var GPS = EXIF.getAllTags(img); - var altitude; - - /* If the lat/lng is available. */ - if ( - typeof GPS.GPSLatitude !== 'undefined' && - typeof GPS.GPSLongitude !== 'undefined' - ) { - // sadly, encoded in [degrees,minutes,seconds] - // primitive value = GPS.GPSLatitude[x].numerator - var lat = - GPS.GPSLatitude[0] + - GPS.GPSLatitude[1] / 60 + - GPS.GPSLatitude[2] / 3600; - var lng = - GPS.GPSLongitude[0] + - GPS.GPSLongitude[1] / 60 + - GPS.GPSLongitude[2] / 3600; - - if (GPS.GPSLatitudeRef !== 'N') { - lat = lat * -1; - } - if (GPS.GPSLongitudeRef === 'W') { - lng = lng * -1; - } - } + GPS = EXIF.getAllTags(img); + } else { + console.log('sorry no'); + } + if (!GPS) { + console.log('sorry no GPS'); + return; + } - // Attempt to use GPS compass heading; will require - // some trig to calc corner points, which you can find below: - - var angle = 0; - // "T" refers to "True north", so -90. - if (GPS.GPSImgDirectionRef === 'T') { - angle = - (Math.PI / 180) * - (GPS.GPSImgDirection.numerator / GPS.GPSImgDirection.denominator - 90); - // "M" refers to "Magnetic north" - } else if (GPS.GPSImgDirectionRef === 'M') { - angle = - (Math.PI / 180) * - (GPS.GPSImgDirection.numerator / GPS.GPSImgDirection.denominator - 90); - } else { - console.log('No compass data found'); - } - - console.log('Orientation:', GPS.Orientation); - - /* If there is orientation data -- i.e. landscape/portrait etc */ - if (GPS.Orientation === 6) { - // CCW - angle += (Math.PI / 180) * -90; - } else if (GPS.Orientation === 8) { - // CW - angle += (Math.PI / 180) * 90; - } else if (GPS.Orientation === 3) { - // 180 - angle += (Math.PI / 180) * 180; - } - - /* If there is altitude data */ - if ( - typeof GPS.GPSAltitude !== 'undefined' && - typeof GPS.GPSAltitudeRef !== 'undefined' - ) { - // Attempt to use GPS altitude: - // (may eventually need to find EXIF field of view for correction) - if ( - typeof GPS.GPSAltitude !== 'undefined' && - typeof GPS.GPSAltitudeRef !== 'undefined' - ) { - altitude = - GPS.GPSAltitude.numerator / GPS.GPSAltitude.denominator + - GPS.GPSAltitudeRef; - } else { - altitude = 0; // none - } + if (typeof GPS.GPSLatitude !== 'undefined' && typeof GPS.GPSLongitude !== 'undefined') { + // sadly, encoded in [degrees,minutes,seconds] + // primitive value = GPS.GPSLatitude[x].numerator + lat = + GPS.GPSLatitude[0] + + GPS.GPSLatitude[1] / 60 + + GPS.GPSLatitude[2] / 3600; + lng = + GPS.GPSLongitude[0] + + GPS.GPSLongitude[1] / 60 + + GPS.GPSLongitude[2] / 3600; + + if (GPS.GPSLatitudeRef !== 'N') { + lat = lat * -1; } - } else { - alert('EXIF initialized. Press again to view data in console.'); + if (GPS.GPSLongitudeRef === 'W') { + lng = lng * -1; + } + } + + // Attempt to use GPS compass heading; will require + // some trig to calc corner points, which you can find below: + + var angle = 0; + // "T" refers to "True north", so -90, "M" refers to "Magnetic north" + if (GPS.GPSImgDirectionRef === 'T' || GPS.GPSImgDirectionRef === 'M') { + angle = + (Math.PI / 180) * + (GPS.GPSImgDirection.numerator / GPS.GPSImgDirection.denominator - 90); + } + + /* If there is orientation data -- i.e. landscape/portrait etc */ + if (GPS.Orientation === 6) { + // CCW + angle += (Math.PI / 180) * -90; + } else if (GPS.Orientation === 8) { + // CW + angle += (Math.PI / 180) * 90; + } else if (GPS.Orientation === 3) { + // 180 + angle += (Math.PI / 180) * 180; + } + + if (lat && lng) { + var panTo = L.latLng(lat, lng); + console.log('lat:' + lat); + console.log('lng:' + lng); + + var deltaX = overlay.getCorner(0).lng - overlay.getCorner(1).lng; // width + var deltaY = overlay.getCorner(0).lat - overlay.getCorner(2).lat; // height + + // _corners: array element holding a object ([]) + // changes made to _corners, unlike getCorners (value return only) + // will actually mutate corners, which is what we need to do + + overlay._corners[0] = L.latLng(lat + deltaY / 2, lng + deltaX / 2); + overlay._corners[1] = L.latLng(lat + deltaY / 2, lng - deltaX / 2); + overlay._corners[2] = L.latLng(lat - deltaY / 2, lng + deltaX / 2); + overlay._corners[3] = L.latLng(lat - deltaY / 2, lng - deltaX / 2); + + overlay.rotateBy(angle); + + overlay._map.setView(panTo, 13); + + return GPS; } }; @@ -1596,10 +1598,29 @@ var EnableEXIF = L.EditAction.extend({ }, addHooks: function() { - var image = this._overlay.getElement(); + var overlay = this._overlay; + var exifable = new Image(); + + exifable.src = overlay._getFullResSrc(); + + exifable.id = exifable.id || 'tempId12345'; + document.body.appendChild(exifable); + + exifable.onload = function onLoadExifableImage() { + EXIF.getData(exifable, function() { + L.EXIF(this, overlay); + }); + }; - // eslint-disable-next-line new-cap - EXIF.getData(image, L.EXIF(image)); + // new Promise(function(resolve, reject) { + // resolve(EXIF.getData(image, function() { + // if (confirm('Press OK to view EXIF metadata in console and geolocate the image.')) { + // L.EXIF(this, overlay); + // } + // })).then(function(r) { + // console.log(r); + // }); + // }); }, }); @@ -1619,7 +1640,7 @@ var Revert = L.EditAction.extend({ addHooks: function() { this._overlay._revert(); - } + }, }); var ToggleRotate = L.EditAction.extend({ @@ -1654,7 +1675,7 @@ var ToggleScale = L.EditAction.extend({ html: use, tooltip: 'Scale Image', }; - + L.DistortableImage.action_map.s = '_toggleScale'; L.EditAction.prototype.initialize.call(this, map, overlay, options); }, @@ -1699,17 +1720,18 @@ L.DistortableImageOverlay.addInitHook(function() { ToggleRotateScale, ToggleOrder, Revert, + EnableEXIF, Export, Delete, ]; -if (this.options.actions) { /* (`this` being DistortableImageOverlay, not the toolbar) */ + if (this.options.actions) { /* (`this` being DistortableImageOverlay, not the toolbar) */ this.editActions = this.options.actions; } else { this.editActions = this.ACTIONS; } - this.editing = new L.DistortableImage.Edit(this, { actions: this.editActions }); + this.editing = new L.DistortableImage.Edit(this, {actions: this.editActions}); }); L.distortableImage = L.DistortableImage || {}; @@ -2438,7 +2460,7 @@ L.DistortableImage.Edit = L.Handler.extend({ } }; - downloadable.src = overlay.options.fullResolutionSrc || overlay._image.src; + downloadable.src = overlay.fullResolutionSrc || overlay.getElement().src; }, /** diff --git a/examples/index.html b/examples/index.html index fb5eb8a85..5c19e4e69 100644 --- a/examples/index.html +++ b/examples/index.html @@ -14,10 +14,10 @@ - + - + @@ -33,17 +33,52 @@ var map; (function() { + // window.onload = getExif; map = L.map('map').setView([51.505, -0.09], 13); map.addGoogleMutant(); map.whenReady(function () { - img = L.distortableImageOverlay('example.jpg', { + img = L.distortableImageOverlay('large.jpg', { selected: true, fullResolutionSrc: 'large.jpg', }).addTo(map); + + // function getExif() { + // L.DomEvent.on(img._image, 'load', function() { + // console.log('hi'); + // window.EXIF = EXIF; + // // var img1 = document.getElementById("img1"); + // EXIF.getData(img._image, function() { + + // // console.log(EXIF.getTag(this, "Make")); + // // console.log(this); + // // var allMetaData = EXIF.getAllTags(this); + // // console.log(allMetaData); + // console.log(this.exifdata); + // var make = EXIF.getTag(this, "Make"); + // var model = EXIF.getTag(this, "Model"); + // console.log('make' + make); + // console.log('model' + model); + // // var makeAndModel = document.getElementById("makeAndModel"); + // // makeAndModel.innerHTML = `${make} ${model}`; + // }); + // }); + // console.log('hi'); + // window.EXIF = EXIF; + // // var img1 = document.getElementById("img1"); + // EXIF.getData(img, function() { + // console.log(this); + // var make = EXIF.getTag(this, "Make"); + // var model = EXIF.getTag(this, "Model"); + // console.log('make' + make); + // console.log('model' + model); + // var makeAndModel = document.getElementById("makeAndModel"); + // makeAndModel.innerHTML = `${make} ${model}`; + // }, img); + // } + // getExif(); }); - })(); diff --git a/src/DistortableImageOverlay.js b/src/DistortableImageOverlay.js index bf0770d41..e4823c315 100644 --- a/src/DistortableImageOverlay.js +++ b/src/DistortableImageOverlay.js @@ -15,6 +15,7 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({ this.edgeMinWidth = this.options.edgeMinWidth; this.editable = this.options.editable; this._url = url; + this._fullResolutionSrc = options.fullResolutionSrc || url; this.rotation = 0; // window.rotation = this.rotation; }, @@ -344,6 +345,10 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({ return map.unproject(reduce.divideBy(4)); }, + _getFullResSrc: function() { + return this._fullResolutionSrc; + }, + // Use for translation calculations // for translation the delta for 1 corner applies to all 4 _calcCornerPointDelta: function() { diff --git a/src/edit/DistortableImage.Edit.js b/src/edit/DistortableImage.Edit.js index d84e61ffe..b8a41c021 100644 --- a/src/edit/DistortableImage.Edit.js +++ b/src/edit/DistortableImage.Edit.js @@ -602,7 +602,7 @@ L.DistortableImage.Edit = L.Handler.extend({ } }; - downloadable.src = overlay.options.fullResolutionSrc || overlay._image.src; + downloadable.src = overlay.fullResolutionSrc || overlay.getElement().src; }, /** diff --git a/src/edit/getEXIFdata.js b/src/edit/getEXIFdata.js index 7707b6b15..444de916d 100644 --- a/src/edit/getEXIFdata.js +++ b/src/edit/getEXIFdata.js @@ -1,85 +1,82 @@ -/* eslint-disable no-unused-vars */ -L.EXIF = function getEXIFdata(img) { +L.EXIF = function getEXIFdata(img, overlay) { + var GPS; + var lat; + var lng; if (Object.keys(EXIF.getAllTags(img)).length !== 0) { console.log(EXIF.getAllTags(img)); - var GPS = EXIF.getAllTags(img); - var altitude; + GPS = EXIF.getAllTags(img); + } else { + console.log('sorry no'); + } + if (!GPS) { + console.log('sorry no GPS'); + return; + } - /* If the lat/lng is available. */ - if ( - typeof GPS.GPSLatitude !== 'undefined' && - typeof GPS.GPSLongitude !== 'undefined' - ) { - // sadly, encoded in [degrees,minutes,seconds] - // primitive value = GPS.GPSLatitude[x].numerator - var lat = - GPS.GPSLatitude[0] + - GPS.GPSLatitude[1] / 60 + - GPS.GPSLatitude[2] / 3600; - var lng = - GPS.GPSLongitude[0] + - GPS.GPSLongitude[1] / 60 + - GPS.GPSLongitude[2] / 3600; + if (typeof GPS.GPSLatitude !== 'undefined' && typeof GPS.GPSLongitude !== 'undefined') { + // sadly, encoded in [degrees,minutes,seconds] + // primitive value = GPS.GPSLatitude[x].numerator + lat = + GPS.GPSLatitude[0] + + GPS.GPSLatitude[1] / 60 + + GPS.GPSLatitude[2] / 3600; + lng = + GPS.GPSLongitude[0] + + GPS.GPSLongitude[1] / 60 + + GPS.GPSLongitude[2] / 3600; - if (GPS.GPSLatitudeRef !== 'N') { - lat = lat * -1; - } - if (GPS.GPSLongitudeRef === 'W') { - lng = lng * -1; - } + if (GPS.GPSLatitudeRef !== 'N') { + lat = lat * -1; + } + if (GPS.GPSLongitudeRef === 'W') { + lng = lng * -1; } + } - // Attempt to use GPS compass heading; will require - // some trig to calc corner points, which you can find below: + // Attempt to use GPS compass heading; will require + // some trig to calc corner points, which you can find below: - var angle = 0; - // "T" refers to "True north", so -90. - if (GPS.GPSImgDirectionRef === 'T') { - angle = - (Math.PI / 180) * - (GPS.GPSImgDirection.numerator / GPS.GPSImgDirection.denominator - 90); - // "M" refers to "Magnetic north" - } else if (GPS.GPSImgDirectionRef === 'M') { - angle = - (Math.PI / 180) * - (GPS.GPSImgDirection.numerator / GPS.GPSImgDirection.denominator - 90); - } else { - console.log('No compass data found'); - } + var angle = 0; + // "T" refers to "True north", so -90, "M" refers to "Magnetic north" + if (GPS.GPSImgDirectionRef === 'T' || GPS.GPSImgDirectionRef === 'M') { + angle = + (Math.PI / 180) * + (GPS.GPSImgDirection.numerator / GPS.GPSImgDirection.denominator - 90); + } + + /* If there is orientation data -- i.e. landscape/portrait etc */ + if (GPS.Orientation === 6) { + // CCW + angle += (Math.PI / 180) * -90; + } else if (GPS.Orientation === 8) { + // CW + angle += (Math.PI / 180) * 90; + } else if (GPS.Orientation === 3) { + // 180 + angle += (Math.PI / 180) * 180; + } - console.log('Orientation:', GPS.Orientation); + if (lat && lng) { + var panTo = L.latLng(lat, lng); + console.log('lat:' + lat); + console.log('lng:' + lng); - /* If there is orientation data -- i.e. landscape/portrait etc */ - if (GPS.Orientation === 6) { - // CCW - angle += (Math.PI / 180) * -90; - } else if (GPS.Orientation === 8) { - // CW - angle += (Math.PI / 180) * 90; - } else if (GPS.Orientation === 3) { - // 180 - angle += (Math.PI / 180) * 180; - } + var deltaX = overlay.getCorner(0).lng - overlay.getCorner(1).lng; // width + var deltaY = overlay.getCorner(0).lat - overlay.getCorner(2).lat; // height - /* If there is altitude data */ - if ( - typeof GPS.GPSAltitude !== 'undefined' && - typeof GPS.GPSAltitudeRef !== 'undefined' - ) { - // Attempt to use GPS altitude: - // (may eventually need to find EXIF field of view for correction) - if ( - typeof GPS.GPSAltitude !== 'undefined' && - typeof GPS.GPSAltitudeRef !== 'undefined' - ) { - altitude = - GPS.GPSAltitude.numerator / GPS.GPSAltitude.denominator + - GPS.GPSAltitudeRef; - } else { - altitude = 0; // none - } - } - } else { - alert('EXIF initialized. Press again to view data in console.'); + // _corners: array element holding a object ([]) + // changes made to _corners, unlike getCorners (value return only) + // will actually mutate corners, which is what we need to do + + overlay._corners[0] = L.latLng(lat + deltaY / 2, lng + deltaX / 2); + overlay._corners[1] = L.latLng(lat + deltaY / 2, lng - deltaX / 2); + overlay._corners[2] = L.latLng(lat - deltaY / 2, lng + deltaX / 2); + overlay._corners[3] = L.latLng(lat - deltaY / 2, lng - deltaX / 2); + + overlay.rotateBy(angle); + + overlay._map.setView(panTo, 13); + + return GPS; } }; diff --git a/src/edit/tools/DistortableImage.PopupBar.js b/src/edit/tools/DistortableImage.PopupBar.js index e4bdb0165..7fcd93bdd 100644 --- a/src/edit/tools/DistortableImage.PopupBar.js +++ b/src/edit/tools/DistortableImage.PopupBar.js @@ -231,10 +231,29 @@ var EnableEXIF = L.EditAction.extend({ }, addHooks: function() { - var image = this._overlay.getElement(); + var overlay = this._overlay; + var exifable = new Image(); - // eslint-disable-next-line new-cap - EXIF.getData(image, L.EXIF(image)); + exifable.src = overlay._getFullResSrc(); + + exifable.id = exifable.id || 'tempId12345'; + document.body.appendChild(exifable); + + exifable.onload = function onLoadExifableImage() { + EXIF.getData(exifable, function() { + L.EXIF(this, overlay); + }); + }; + + // new Promise(function(resolve, reject) { + // resolve(EXIF.getData(image, function() { + // if (confirm('Press OK to view EXIF metadata in console and geolocate the image.')) { + // L.EXIF(this, overlay); + // } + // })).then(function(r) { + // console.log(r); + // }); + // }); }, }); @@ -254,7 +273,7 @@ var Revert = L.EditAction.extend({ addHooks: function() { this._overlay._revert(); - } + }, }); var ToggleRotate = L.EditAction.extend({ @@ -289,7 +308,7 @@ var ToggleScale = L.EditAction.extend({ html: use, tooltip: 'Scale Image', }; - + L.DistortableImage.action_map.s = '_toggleScale'; L.EditAction.prototype.initialize.call(this, map, overlay, options); }, @@ -334,15 +353,16 @@ L.DistortableImageOverlay.addInitHook(function() { ToggleRotateScale, ToggleOrder, Revert, + EnableEXIF, Export, Delete, ]; -if (this.options.actions) { /* (`this` being DistortableImageOverlay, not the toolbar) */ + if (this.options.actions) { /* (`this` being DistortableImageOverlay, not the toolbar) */ this.editActions = this.options.actions; } else { this.editActions = this.ACTIONS; } - this.editing = new L.DistortableImage.Edit(this, { actions: this.editActions }); + this.editing = new L.DistortableImage.Edit(this, {actions: this.editActions}); }); diff --git a/test/karma.conf.js b/test/karma.conf.js index f9815bb95..5a2ef91ef 100644 --- a/test/karma.conf.js +++ b/test/karma.conf.js @@ -7,12 +7,13 @@ module.exports = function(config) { basePath: '../', plugins: [ + require('glfx'), + require('exif-js'), require('mocha'), require('karma-mocha'), require('karma-coverage'), require('karma-mocha-reporter'), require('karma-phantomjs-launcher'), - require('glfx'), require('webgl-distort/dist/webgl-distort.js'), ], From 518d9a3e9a9c882cb509536cf315d0a8337fc295 Mon Sep 17 00:00:00 2001 From: sashadev-sky Date: Tue, 3 Sep 2019 00:40:02 -0400 Subject: [PATCH 3/5] Exifdata --- Gruntfile.js | 1 - dist/leaflet.distortableimage.js | 68 ++++++++------------- examples/index.html | 22 +------ src/edit/DistortableImage.Edit.js | 2 +- src/edit/getEXIFdata.js | 44 +++++-------- src/edit/tools/DistortableImage.PopupBar.js | 20 +++--- 6 files changed, 56 insertions(+), 101 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 0193b5d53..af8642842 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -28,7 +28,6 @@ module.exports = function(grunt) { warpWebGl: false, EXIF: false, alert: false, - confirm: false, // Mocha diff --git a/dist/leaflet.distortableimage.js b/dist/leaflet.distortableimage.js index 77d538795..61ef2c6f2 100644 --- a/dist/leaflet.distortableimage.js +++ b/dist/leaflet.distortableimage.js @@ -892,38 +892,26 @@ L.distortableCollection = function(id, options) { }; L.EXIF = function getEXIFdata(img, overlay) { - var GPS; + var GPS = img.exifdata; var lat; var lng; - if (Object.keys(EXIF.getAllTags(img)).length !== 0) { - console.log(EXIF.getAllTags(img)); - GPS = EXIF.getAllTags(img); - } else { - console.log('sorry no'); - } - if (!GPS) { - console.log('sorry no GPS'); - return; - } - if (typeof GPS.GPSLatitude !== 'undefined' && typeof GPS.GPSLongitude !== 'undefined') { - // sadly, encoded in [degrees,minutes,seconds] - // primitive value = GPS.GPSLatitude[x].numerator - lat = - GPS.GPSLatitude[0] + - GPS.GPSLatitude[1] / 60 + - GPS.GPSLatitude[2] / 3600; - lng = - GPS.GPSLongitude[0] + - GPS.GPSLongitude[1] / 60 + - GPS.GPSLongitude[2] / 3600; - - if (GPS.GPSLatitudeRef !== 'N') { - lat = lat * -1; - } - if (GPS.GPSLongitudeRef === 'W') { - lng = lng * -1; - } + // sadly, encoded in [degrees,minutes,seconds] + // primitive value = GPS.GPSLatitude[x].numerator + lat = + GPS.GPSLatitude[0] + + GPS.GPSLatitude[1] / 60 + + GPS.GPSLatitude[2] / 3600; + lng = + GPS.GPSLongitude[0] + + GPS.GPSLongitude[1] / 60 + + GPS.GPSLongitude[2] / 3600; + + if (GPS.GPSLatitudeRef !== 'N') { + lat = lat * -1; + } + if (GPS.GPSLongitudeRef === 'W') { + lng = lng * -1; } // Attempt to use GPS compass heading; will require @@ -1608,19 +1596,17 @@ var EnableEXIF = L.EditAction.extend({ exifable.onload = function onLoadExifableImage() { EXIF.getData(exifable, function() { - L.EXIF(this, overlay); + if (Object.keys(this.exifdata).length !== 0) { + if (Object.keys(this.exifdata).includes('GPSLatitude') && Object.keys(this.exifdata).includes('GPSLongitude')) { + L.EXIF(this, overlay); + } else { + alert('Only the following EXIF metadata is available:' + Object.keys(this.exifdata)); + } + } else { + alert('Please provide a fullResolutionSrc containing EXIF metadata'); + } }); }; - - // new Promise(function(resolve, reject) { - // resolve(EXIF.getData(image, function() { - // if (confirm('Press OK to view EXIF metadata in console and geolocate the image.')) { - // L.EXIF(this, overlay); - // } - // })).then(function(r) { - // console.log(r); - // }); - // }); }, }); @@ -2460,7 +2446,7 @@ L.DistortableImage.Edit = L.Handler.extend({ } }; - downloadable.src = overlay.fullResolutionSrc || overlay.getElement().src; + downloadable.src = overlay._getFullResSrc(); }, /** diff --git a/examples/index.html b/examples/index.html index 5c19e4e69..65bec8e1b 100644 --- a/examples/index.html +++ b/examples/index.html @@ -14,10 +14,10 @@ - + - + @@ -33,13 +33,11 @@ var map; (function() { - // window.onload = getExif; - map = L.map('map').setView([51.505, -0.09], 13); map.addGoogleMutant(); map.whenReady(function () { - img = L.distortableImageOverlay('large.jpg', { + img = L.distortableImageOverlay('example.jpg', { selected: true, fullResolutionSrc: 'large.jpg', }).addTo(map); @@ -64,20 +62,6 @@ // // makeAndModel.innerHTML = `${make} ${model}`; // }); // }); - // console.log('hi'); - // window.EXIF = EXIF; - // // var img1 = document.getElementById("img1"); - // EXIF.getData(img, function() { - // console.log(this); - // var make = EXIF.getTag(this, "Make"); - // var model = EXIF.getTag(this, "Model"); - // console.log('make' + make); - // console.log('model' + model); - // var makeAndModel = document.getElementById("makeAndModel"); - // makeAndModel.innerHTML = `${make} ${model}`; - // }, img); - // } - // getExif(); }); })(); diff --git a/src/edit/DistortableImage.Edit.js b/src/edit/DistortableImage.Edit.js index b8a41c021..add7f951d 100644 --- a/src/edit/DistortableImage.Edit.js +++ b/src/edit/DistortableImage.Edit.js @@ -602,7 +602,7 @@ L.DistortableImage.Edit = L.Handler.extend({ } }; - downloadable.src = overlay.fullResolutionSrc || overlay.getElement().src; + downloadable.src = overlay._getFullResSrc(); }, /** diff --git a/src/edit/getEXIFdata.js b/src/edit/getEXIFdata.js index 444de916d..26c248add 100644 --- a/src/edit/getEXIFdata.js +++ b/src/edit/getEXIFdata.js @@ -1,36 +1,24 @@ L.EXIF = function getEXIFdata(img, overlay) { - var GPS; + var GPS = img.exifdata; var lat; var lng; - if (Object.keys(EXIF.getAllTags(img)).length !== 0) { - console.log(EXIF.getAllTags(img)); - GPS = EXIF.getAllTags(img); - } else { - console.log('sorry no'); - } - if (!GPS) { - console.log('sorry no GPS'); - return; - } - if (typeof GPS.GPSLatitude !== 'undefined' && typeof GPS.GPSLongitude !== 'undefined') { - // sadly, encoded in [degrees,minutes,seconds] - // primitive value = GPS.GPSLatitude[x].numerator - lat = - GPS.GPSLatitude[0] + - GPS.GPSLatitude[1] / 60 + - GPS.GPSLatitude[2] / 3600; - lng = - GPS.GPSLongitude[0] + - GPS.GPSLongitude[1] / 60 + - GPS.GPSLongitude[2] / 3600; + // sadly, encoded in [degrees,minutes,seconds] + // primitive value = GPS.GPSLatitude[x].numerator + lat = + GPS.GPSLatitude[0] + + GPS.GPSLatitude[1] / 60 + + GPS.GPSLatitude[2] / 3600; + lng = + GPS.GPSLongitude[0] + + GPS.GPSLongitude[1] / 60 + + GPS.GPSLongitude[2] / 3600; - if (GPS.GPSLatitudeRef !== 'N') { - lat = lat * -1; - } - if (GPS.GPSLongitudeRef === 'W') { - lng = lng * -1; - } + if (GPS.GPSLatitudeRef !== 'N') { + lat = lat * -1; + } + if (GPS.GPSLongitudeRef === 'W') { + lng = lng * -1; } // Attempt to use GPS compass heading; will require diff --git a/src/edit/tools/DistortableImage.PopupBar.js b/src/edit/tools/DistortableImage.PopupBar.js index 7fcd93bdd..dffe5530b 100644 --- a/src/edit/tools/DistortableImage.PopupBar.js +++ b/src/edit/tools/DistortableImage.PopupBar.js @@ -241,19 +241,17 @@ var EnableEXIF = L.EditAction.extend({ exifable.onload = function onLoadExifableImage() { EXIF.getData(exifable, function() { - L.EXIF(this, overlay); + if (Object.keys(this.exifdata).length !== 0) { + if (Object.keys(this.exifdata).includes('GPSLatitude') && Object.keys(this.exifdata).includes('GPSLongitude')) { + L.EXIF(this, overlay); + } else { + alert('Only the following EXIF metadata is available:' + Object.keys(this.exifdata)); + } + } else { + alert('Please provide a fullResolutionSrc containing EXIF metadata'); + } }); }; - - // new Promise(function(resolve, reject) { - // resolve(EXIF.getData(image, function() { - // if (confirm('Press OK to view EXIF metadata in console and geolocate the image.')) { - // L.EXIF(this, overlay); - // } - // })).then(function(r) { - // console.log(r); - // }); - // }); }, }); From 25681dc2f670191f04170f4f9ac528cb80cd81e1 Mon Sep 17 00:00:00 2001 From: sashadev-sky Date: Tue, 3 Sep 2019 00:41:52 -0400 Subject: [PATCH 4/5] remove comments from index.html --- examples/index.html | 21 --------------------- 1 file changed, 21 deletions(-) diff --git a/examples/index.html b/examples/index.html index 65bec8e1b..d754e73c8 100644 --- a/examples/index.html +++ b/examples/index.html @@ -41,27 +41,6 @@ selected: true, fullResolutionSrc: 'large.jpg', }).addTo(map); - - // function getExif() { - // L.DomEvent.on(img._image, 'load', function() { - // console.log('hi'); - // window.EXIF = EXIF; - // // var img1 = document.getElementById("img1"); - // EXIF.getData(img._image, function() { - - // // console.log(EXIF.getTag(this, "Make")); - // // console.log(this); - // // var allMetaData = EXIF.getAllTags(this); - // // console.log(allMetaData); - // console.log(this.exifdata); - // var make = EXIF.getTag(this, "Make"); - // var model = EXIF.getTag(this, "Model"); - // console.log('make' + make); - // console.log('model' + model); - // // var makeAndModel = document.getElementById("makeAndModel"); - // // makeAndModel.innerHTML = `${make} ${model}`; - // }); - // }); }); })(); From 65a660aa695d99fee1ae38769b6a2c8d883bbfc0 Mon Sep 17 00:00:00 2001 From: sashadev-sky Date: Tue, 3 Sep 2019 00:48:07 -0400 Subject: [PATCH 5/5] make sure to remove exifable afterwards --- dist/leaflet.distortableimage.js | 24 +++++++++++++-------- src/edit/tools/DistortableImage.PopupBar.js | 24 +++++++++++++-------- 2 files changed, 30 insertions(+), 18 deletions(-) diff --git a/dist/leaflet.distortableimage.js b/dist/leaflet.distortableimage.js index 61ef2c6f2..caad42379 100644 --- a/dist/leaflet.distortableimage.js +++ b/dist/leaflet.distortableimage.js @@ -1595,18 +1595,24 @@ var EnableEXIF = L.EditAction.extend({ document.body.appendChild(exifable); exifable.onload = function onLoadExifableImage() { - EXIF.getData(exifable, function() { - if (Object.keys(this.exifdata).length !== 0) { - if (Object.keys(this.exifdata).includes('GPSLatitude') && Object.keys(this.exifdata).includes('GPSLongitude')) { - L.EXIF(this, overlay); + if (window && window.hasOwnProperty('EXIF')) { + EXIF.getData(exifable, function() { + if (Object.keys(this.exifdata).length !== 0) { + if (Object.keys(this.exifdata).includes('GPSLatitude') && Object.keys(this.exifdata).includes('GPSLongitude')) { + L.EXIF(this, overlay); + } else { + alert('Only the following EXIF metadata is available:' + Object.keys(this.exifdata)); + } } else { - alert('Only the following EXIF metadata is available:' + Object.keys(this.exifdata)); + alert('Please provide a fullResolutionSrc containing EXIF metadata'); } - } else { - alert('Please provide a fullResolutionSrc containing EXIF metadata'); - } - }); + }); + } else { + alert('window does not have property EXIF'); + } }; + + L.DomUtil.remove(exifable); }, }); diff --git a/src/edit/tools/DistortableImage.PopupBar.js b/src/edit/tools/DistortableImage.PopupBar.js index dffe5530b..a2a1fb1cb 100644 --- a/src/edit/tools/DistortableImage.PopupBar.js +++ b/src/edit/tools/DistortableImage.PopupBar.js @@ -240,18 +240,24 @@ var EnableEXIF = L.EditAction.extend({ document.body.appendChild(exifable); exifable.onload = function onLoadExifableImage() { - EXIF.getData(exifable, function() { - if (Object.keys(this.exifdata).length !== 0) { - if (Object.keys(this.exifdata).includes('GPSLatitude') && Object.keys(this.exifdata).includes('GPSLongitude')) { - L.EXIF(this, overlay); + if (window && window.hasOwnProperty('EXIF')) { + EXIF.getData(exifable, function() { + if (Object.keys(this.exifdata).length !== 0) { + if (Object.keys(this.exifdata).includes('GPSLatitude') && Object.keys(this.exifdata).includes('GPSLongitude')) { + L.EXIF(this, overlay); + } else { + alert('Only the following EXIF metadata is available:' + Object.keys(this.exifdata)); + } } else { - alert('Only the following EXIF metadata is available:' + Object.keys(this.exifdata)); + alert('Please provide a fullResolutionSrc containing EXIF metadata'); } - } else { - alert('Please provide a fullResolutionSrc containing EXIF metadata'); - } - }); + }); + } else { + alert('window does not have property EXIF'); + } }; + + L.DomUtil.remove(exifable); }, });