The avatar for @mxfh
Friedrich Hartmann
Public
Raster Ops
Edited
Apr 30, 2023
Paused
3 stars
Raster Ops
Storing lossless earth elevation data in modern image formats
2D Canvas Helpers and UtilitiesPixel Perfect Image Rendering TestsEvery Emoji (v15)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
jpgToImg(encodedImage)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function elevationRasterToIntegerBuffer(raster) {
let { width, height, e } = raster;
let eUint32 = {
buffer: new Uint32Array(e.length),
width,
height,
bitDepth: params.bits
};

let min = 1 << bits;
let max = 0;
e.forEach((v, i) => {
v = (v + elevationOffset) * Math.pow(10, elevationExagerration);
let valueInt = mapToIntegers(v);
min = Math.min(valueInt, min);
max = Math.max(valueInt, max);
eUint32.buffer[i] = valueInt;
});
if (eUint32.buffer.length > 0) {
eUint32.max = max;
eUint32.min = min;
}
return eUint32;
}
Insert cell
function integerBufferToImageData(
eUint32,
{ strategy, customChannelOrder } = {}
) {
let { width, height, buffer } = eUint32;
let rgb = new ImageData(width, height);
// make opaque
rgb.data.fill(255);
buffer.forEach((v, i) => {
let vRGB = integerToRGB(v, { strategy, customChannelOrder });
const iUint32 = i * 4;
rgb.data.set(vRGB, iUint32);
});
return rgb;
}
Insert cell
function integerToRGB(
valueInt,
{ strategy = STRATEGIES.INTERLEAVE, customChannelOrder = [0, 1, 2] } = {}
) {
const [R, G, B] = customChannelOrder;
let triple = undefined;
if (strategy === STRATEGIES.SPLIT8) {
triple = split24bitsTo3at8bits(valueInt);
} else if (strategy === STRATEGIES.SPLIT_EQUAL) {
triple = splitEqual(valueInt);
} else if (strategy === STRATEGIES.INTERLEAVE) {
triple = bitwiseInterleave(valueInt);
} else if (strategy === STRATEGIES.EXPERIMENTAL) {
triple = experimental(valueInt);
}

if (OFFSET_MODES[channelBitOffsetMode] !== OFFSET_MODES.NONE) {
return new Uint8ClampedArray([
triple[R] << channelBitOffset[R],
triple[G] << channelBitOffset[G],
triple[B] << channelBitOffset[B]
]);
} else {
return new Uint8ClampedArray([triple[R], triple[G], triple[B]]);
}
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
jpeg = import("https://cdn.skypack.dev/jpeg-js@0.4.4?min")
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more