[Imagery] Images cannot be saved

[akhenry]

Users need a way to be able to save images from the imagery view.

Right-click and "Save Image" would be perfectly sufficient except that it doesn't work right now because it's blocked by a div that overlays the image which is part of the compass implementation.

If the compass can't be achieved without blocking the browser's build in "Save Image" functionality, then we should implement an action for doing this.

[xshifty]

Hello @akhenry. I added a new action to imagery plugin in order to make it possible to download the image.
Hope it solves this problem.

If you have any suggestion, let me know.

[charlesh88]

Testing Notes

Ideally we test this in a variety of browsers and OS's, especially Ubuntu if possible.

1. Navigate to an imagery endpoint, ideally real imagery (vs. Example Imagery) so that you can see the compass rose.
2. Context-click anywhere in the main image (other than the compass rose) and verify that the browser-based context menu includes an action to save the image.
3. Save the image, then view the resulting file and confirm the image was saved correctly.
4. Put the image in a Display Layout and repeat steps 1 - 3.
5. Put the image in a Flexible Layout and repeat steps 1 - 3.

[charlesh88]

Verified fixed Testathon 6/2/2021

[nikhilmandlik]

Verified Fixed.

right clicking, in middle of image does not give 'save image as' option

[jvigliotta]

Still seeing an issue when right clicking in certain areas.

[unlikelyzero]

@charlesh88 can you verify that this was not already fixed?

[charlesh88]

Verified NOT fixed Bug Bash 04-21-22. Context-click on image does not give user a Save Image... option. This is due to a code change to display imagery as a div with background.

[akhenry]

We need to revisit this. If the image does indeed need to be displayed as the background of a div then we need to provide the user with some additional affordance for downloading the image. @xshifty proposed an approach using a new local control, which seems like a reasonable alternative if we can't use browser native behavior here.

Unless there's some trick we can use to trigger the correct browser native behavior? Like an aria attribute or something?

[charlesh88]

Solution here: https://codepen.io/charlesh88/pen/bGLNyzv?editors=1100

Basically, layer an actual <img> tag (with opacity: 0) over the zoomable/pan-able background-image div.

[charlesh88]

Testing Notes

1. View Example Imagery or an image data product.
2. Context (right) click on the image itself and verify that the OS-provided context menu includes "Save Image As...". Note that the image itself must be clicked; clicking outside the image, the Prev or Next Image buttons or the compass rose will not (and is not expected to) provide an image context.
3. Choose that menu option, then verify that the downloaded image is the same one that was displayed.

[michaelrogers]

Fix verified locally on release/2.0.5 branch during testathon. User is able to successfully save images directly and when composed in layouts.

[khalidadil]

Verified fixed - testathon on 06/09/2022