render-canvas
v1.0.0
Published
Blast multi-band rasters to a canvas with speed and style.
Downloads
5
Maintainers
Readme
Raster Blaster
Blast rasters to a canvas with speed and style.
Given multi-band raster data, for example satellite imagery, this module renders them to a canvas, allowing arbitrary mappings of raster bands to canvas color channels. This makes it easy and fast to make contrast adjustments, calculate vegetation index like NDVI and many other common operations.
Tiny example of Raster Blaster in action
Under the hood, uses WebGL when available for high performance, falling back to standard canvas operations if needed.
Note Work in progress or rather proof of concept, probably not suitable for production at this point.
Example
import { Pipeline, WebGlRenderer, PipelineSteps } from 'RasterBlaster'
const pipeline = new Pipeline([
new PipelineSteps.Index('$r+$g-$b'),
new PipelineSteps.LinearContrast(0.0, 1.0),
new PipelineSteps.ColorMap('RdYlGn'),
new PipelineSteps.BandsToChannels({ a: 'a' })
],
{
// Map (arbitrary) band names to their indices
bands: {
'r': 0,
'g': 1,
'b': 2,
'a': 3
},
dataType: 'Uint8'
})
const renderer = new WebGlRenderer()
const canvas = document.createElement('canvas')
canvas.width = canvas.height = 256
document.body.appendChild(canvas)
renderer.render(canvas, pipeline, {
getRasters: () => // Function that returns a promise that resolves to an array of typed arrays, one for each band
})