<!DOCTYPE html>
<html>
<head>
<script src="./node_modules/chroma-js/chroma.min.js"></script>
<script src="./node_modules/flug/index.js"></script>
<script src="./node_modules/geotiff/dist-browser/geotiff.js"></script>
<script src="./dist/web/geotiff-tile.min.js"></script>
<script>
window.process = {
env: {
// TEST_NAME: "pulling tile from 3-band Geographic GeoTIFF as layout [row][column][band]"
}
}
</script>
</head>
<body>
<script>
function three_to_four_bands({ tile, height, width }) {
const data = new Array(4 * height * width).fill(255);
for (let b = 0; b <= 2; b++) {
for (let r = 0; r < height; r++) {
for (let c = 0; c < width; c++) {
data[(r * 4 * width) + (4 * c) + b] = tile[b][r][c];
}
}
}
return data;
}
function displayTile({ tile, height, width }) {
const data = Uint8ClampedArray.from(tile);
const imageData = new ImageData(data, width, height);
const canvas = document.createElement("CANVAS");
canvas.height = imageData.height;
canvas.width = imageData.width;
const context = canvas.getContext("2d");
context.webkitImageSmoothingEnabled = false;
context.mozImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
context.putImageData(imageData, 0, 0);
context.webkitImageSmoothingEnabled = false;
context.mozImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
document.body.appendChild(canvas);
canvas.style.background = "darkred";
canvas.style.border = "5px solid chartreuse";
canvas.style.margin = "10px";
// canvas.style.height = "512px";
}
test("resampling", async ({ eq }) => {
const geotiff = await GeoTIFF.fromUrl("./ndvi2.tiff");
const scale = 5;
const _image = await geotiff.getImage();
const rasters = await geotiff.readRasters({
window: [0, 0, _image.getWidth(), _image.getHeight()],
interleave: true,
width: _image.getWidth() * scale,
height: _image.getHeight() * scale,
resampleMethod: "bilinear"
});
displayTile({ tile: rasters, height: _image.getHeight() * scale, width: _image.getWidth() * scale });
const { height, width, tile } = await geotiff_tile.createTile({
debug_level: 0,
geotiff,
bbox: _image.getBoundingBox(),
bbox_srs: _image.geoKeys.ProjectedCSTypeGeoKey,
method: "bilinear",
round: true,
tile_height: _image.getHeight() * scale,
tile_array_types_strategy: "auto",
tile_srs: _image.geoKeys.ProjectedCSTypeGeoKey,
tile_width: _image.getWidth() * scale,
timed: true
});
eq(tile[0].constructor.name, "Uint8Array");
const data = new Uint8Array(tile[0].length * 4);
for (let i = 0; i < tile[0].length; i++) {
data[i * 4] = tile[0][i];
data[i * 4 + 1] = tile[1][i];
data[i * 4 + 2] = tile[2][i];
data[i * 4 + 3] = tile[3][i];
}
displayTile({ tile: data, height: _image.getHeight() * scale, width: _image.getWidth() * scale });
});
</script>
</body>
</html>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent