Merge pull request #12770 from tschaub/avoid-clamped

Use Uint8Array instead of Uint8ClampedArray for increased browser compatibility

examples/data-tiles.js

@@ -31,7 +31,8 @@ const map = new Map({
           context.fillText(`y: ${y}`, half, half + lineHeight);
           context.strokeRect(0, 0, size, size);
           const data = context.getImageData(0, 0, size, size).data;
-          return Promise.resolve(data);
+          // converting to Uint8Array for increased browser compatibility
+          return Promise.resolve(new Uint8Array(data.buffer));
         },
         // disable opacity transition to avoid overlapping labels during tile loading
         transition: 0,

src/ol/DataTile.js

@@ -5,7 +5,8 @@ import Tile from './Tile.js';
 import TileState from './TileState.js';
 
 /**
- * Data that can be used with a DataTile.
+ * Data that can be used with a DataTile.  For increased browser compatibility, use
+ * Uint8Array instead of Uint8ClampedArray where possible.
  * @typedef {Uint8Array|Uint8ClampedArray|Float32Array|DataView} Data
  */
 

src/ol/source/GeoTIFF.js

@@ -6,6 +6,7 @@ import State from './State.js';
 import TileGrid from '../tilegrid/TileGrid.js';
 import {Pool, fromUrl as tiffFromUrl, fromUrls as tiffFromUrls} from 'geotiff';
 import {Projection, get as getCachedProjection} from '../proj.js';
+import {clamp} from '../math.js';
 import {create as createDecoderWorker} from '../worker/geotiff-decoder.js';
 import {getIntersection} from '../extent.js';
 import {toSize} from '../size.js';
@@ -587,7 +588,7 @@ class GeoTIFFSource extends DataTile {
     const nodataValues = this.nodataValues_;
 
     return Promise.all(requests).then(function (sourceSamples) {
-      const data = new Uint8ClampedArray(dataLength);
+      const data = new Uint8Array(dataLength);
       let dataIndex = 0;
       for (let pixelIndex = 0; pixelIndex < pixelCount; ++pixelIndex) {
         let transparent = addAlpha;
@@ -613,7 +614,7 @@ class GeoTIFFSource extends DataTile {
             const sourceValue =
               sourceSamples[sourceIndex][sampleIndex][pixelIndex];
 
-            const value = gain * sourceValue + bias;
+            const value = clamp(gain * sourceValue + bias, 0, 255);
             if (!addAlpha) {
               data[dataIndex] = value;
             } else {