I'd like to put a GeoTIFF RGB as a Leaflet overlay. I can read the GeoTIFF file in javascript but end up with 4 arrays (R,G,B,alpha) and don't know how to create an image out of these arrays.
To elaborate in more detail: I use Pytroll to create a Seviri "natural" composite and save it as GeoTIFF (the image looks similar to the last one from this notebook: Example image
Then I use the Leaflet Plugin Leaflet.CanvasLayer to load the GeoTIFF, following this example. (Note that they use a single band in their example, not an RGB with multiple bands)
Doing so, I get 4 arrays (R,G,B,alpha). Now, I have the problem of "stitching" these channels together to arrive at a single image. Maybe this is very obvious, but I don't see the solution.
I also tried to use geotiff.js and load the GeoTIFF directly from there with the readRGB function, which yields a large Uint8Array, but then I don't know how to put this on Leaflet.
Any hints or ideas are much appreciated!