Support loading geotiff image from blob

My app supports users dragging a geo-referenced image onto the map, which will then display it at the right location.

This cannot currently be ported to the new openlayers GeoTIFF source, because that can only load an image from a url, while an image that is dragged into the browser becomes available as a Blob.

Normally, one would call URL.createObjectURL(blob) and pass the resulting URL, but that does not work for the GeoTIFF source (at least not in the browsers I’ve tried, such as Firefox 100), because the geotiff.js function fromUrl needs to be able to read ranges from the file, and the browser does not support the range api for that data url.

It would therefore be nice if GeoTIFF exposed access to the fromBlob function in geotiff.js.

Here is a simple suggestion how this could be implemented:

diff --git a/src/ol/source/GeoTIFF.js b/src/ol/source/GeoTIFF.js
index 2188a297b..545182ed3 100644
--- a/src/ol/source/GeoTIFF.js
+++ b/src/ol/source/GeoTIFF.js
@@ -4,7 +4,7 @@
 import DataTile from './DataTile.js';
 import State from './State.js';
 import TileGrid from '../tilegrid/TileGrid.js';
-import {Pool, fromUrl as tiffFromUrl, fromUrls as tiffFromUrls} from 'geotiff';
+import {Pool, fromUrl as tiffFromUrl, fromUrls as tiffFromUrls, fromBlob as tiffFromBlob} from 'geotiff';
 import {
   Projection,
   get as getCachedProjection,
@@ -19,6 +19,7 @@ import {fromCode as unitsFromCode} from '../proj/Units.js';
  * @typedef {Object} SourceInfo
  * @property {string} url URL for the source GeoTIFF.
  * @property {Array<string>} [overviews] List of any overview URLs.
+ * @property {Blob} blob Source GeoTIFF is provided as a blob.  Overrides url and overviews.
  * @property {number} [min=0] The minimum source data value.  Rendered values are scaled from 0 to 1 based on
  * the configured min and max.  If not provided and raster statistics are available, those will be used instead.
  * If neither are available, the minimum for the data type will be used.  To disable this behavior, set
@@ -189,7 +190,9 @@ function getImagesForTIFF(tiff) {
  */
 function getImagesForSource(source, options) {
   let request;
-  if (source.overviews) {
+  if (source.blob) {
+    request = tiffFromBlob(source.blob);
+  } else if (source.overviews) {
     request = tiffFromUrls(source.url, source.overviews, options);
   } else {
     request = tiffFromUrl(source.url, options);

With this small patch I have successfully displayed images dragged into the browser using openlayers.

[ahocevar]

@m-mohr Yes, please revive it. I have already added a review comment to #13191.

[ahocevar]

Yes, thanks, @m-mohr. Fixed with #13724.