azavea / loam

Javascript wrapper for GDAL in the browser
Apache License 2.0
214 stars 16 forks source link

Does loam compromise the image quality ? #128

Open syncthreads-sammith opened 8 months ago

syncthreads-sammith commented 8 months ago

Hey hi, i just i want to know that does loam compromise the image quality,Below i have given code that is used to parse .tif file and return some O/P in object

import loam from "loam";
import * as L from "leaflet";
import { v4 as uuidv4 } from "uuid";
loam.initialize("/");
export const CreateLayer = async (files, map) => { 
  const dataset = await loam.open(files); 
  const wktDest =
    'GEOGCS["WGS 84",DATUM["WGS_1984",SPHEROID["WGS 84",6378137,298.257223563,AUTHORITY["EPSG","7030"]],AUTHORITY["EPSG","6326"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.01745329251994328,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4326"]]';
  const smallDataset = await dataset.convert([
    "-of",
    "GTiff",
    "-outsize",
    "1000",
    "0",
    "-r",
    "nearest",
  ]);
  dataset.close();
  const newDataset = await smallDataset.warp([
    "-co",
    "PREDICTOR=2",
    "-dstnodata",
    "0",
    "-of",
    "GTiff",
    "-t_srs",
    "EPSG:3857",
    "-r",
    "near",
  ]);
  smallDataset.close();
  const width = await newDataset.width();
  const height = await newDataset.height();
  const geoTransform = await newDataset.transform();
  const wktSource = await newDataset.wkt();
  const corners = [
    [0, 0],
    [width, 0],
    [width, height],
    [0, height],
  ];
  const geoCorners = corners.map((coords) => {
    const x = coords[0];
    const y = coords[1];
    return [
      geoTransform[0] + geoTransform[1] * x + geoTransform[2] * y,
      geoTransform[3] + geoTransform[4] * x + geoTransform[5] * y,
    ];
  });
  const wgs84GeoCornersGdal = await loam.reproject(
    wktSource,
    wktDest,
    geoCorners
  );
  const wgs84GeoCorners = wgs84GeoCornersGdal.map((coords) => [
    coords[1],
    coords[0],
  ]);
  const pngDataset = await newDataset.convert(["-of", "PNG","-co", "COMPRESSION=deflate","-co", "PREDICTOR=2",]);
  const imageBytes = await pngDataset.bytes();
  const outputBlob = new Blob([imageBytes], { type: "image/png" });
  const imageURL = window.URL.createObjectURL(outputBlob);
  const imageOverlay = L.imageOverlay(imageURL, wgs84GeoCorners);
  const imageBounds = imageOverlay.getBounds();
  // const zoom = map.target.getBoundsZoom(imageBounds);
  const center = imageBounds.getCenter();
  const TiffParsedata = {
    id: uuidv4(),
    url: `${imageURL}`,
    bounds: wgs84GeoCorners,
    imageBounds: imageBounds,
    center: center,
  };
  let center1 = [center.lat, center.lng]; 
  // map.target.setView(center1, zoom);
  return TiffParsedata;
};

The out put of this above method will return imageUrl,Bounds,ImageBounds and Center so here image url is being overlayed on react-leaflet map for further implement, but the image is being generated by loam will have poor quality then its original (original image size can be around 200mb to 600mb .tif file) my question is there any way that loam can persist image original size as it is,do we have any work arounds here

I have tried this below code to improve the image quality but no use ! const pngDataset = await newDataset.convert(["-of", "PNG","-co", "COMPRESSION=deflate","-co", "PREDICTOR=2",]); Please let us know if there are any possibility. Thanks you...

Originally posted by @syncthreads-sammith in https://github.com/azavea/loam/issues/120#issuecomment-1867372479

syncthreads-sammith commented 8 months ago

Hi @ddohler as you mentioned in your previous response here i have tried create dataset.wrap without creating samllDataset unfortunately code is not generating any O/P Below code block i have tried

export const CreateLayer = async (files, map) => {

....//rest of the code same as above

**Changed code  below **

const newDataset = await dataset.warp([
    "-co",
    "PREDICTOR=2",
    "-dstnodata",
    "0",
    "-of",
    "GTiff",
    "-t_srs",
    "EPSG:3857",
    "-r",
    "bilinear",
  ]);

...// rest of the code 
 };

if i have made this changes and use it on application this block of code will not give any O/P, i presume due to not creating smallDataset was i rigth ? did i got you answer right ? if not can you guide me through !,and although im trying to Resampling generated image it would be helpfull if give your thoughts on that