Sending and decoding ee.Image objects in web app

Question

I am developing a web application which uses the JavaScript Google Earth Engine API to perform calculations such as summing and compositing images on the backend.

I have successfully been able to fetch assets from my GCP project and visualize them on a web map, but I am now trying to send and receive assets on which I have performed operations such as putting multiple ee.Image assets into an ee.ImageCollection and taking the maximum value of the images. I can perform this operation and get a valid map id from the resulting image, which works for visualizing the product. The trouble comes when I want to save the resulting ee.Image product for use in later calculations.

How do I take something like the below JSON object I get when I try to send an ee.Image object as a response and convert it to an ee.Image object which can be used in further operations?

{
  func: {
    signature_: {
      args: [Array],
      description: "Updates an image's mask at all positions where the existing mask is not zero. The output image retains the metadata and footprint of the input image.",      
      returns: 'Image',
      name: 'Image.updateMask'
    }
  },
  args: {
    image: { func: [Object], args: [Object], varName: null },
    mask: { func: [Object], args: [Object], varName: null }
  },
  varName: null
}

I would think this would be related to object serialization and ee.ComputedObject functions, but I cannot figure out how to load this back to an ee.Image.

Answer 1

I have been digging in the GitHub documentation and found out how to solve this issue in the JavaScript API.

I first serialize the image object using the ee.Image.serialize() method, then when receiving the serialized image as a response, I use parse the response to a JSON object using JSON.parse() and subsequently call the ee.Deserializer.decode() method on the parsed object.

The working code I use to get a map id from an object that I previously manipulated and have stored in a serialized object looks something like this, although in my actual code these are not functions but rather API endpoints which can call one another

// function to manipulate image array and store as serialized object
function manipulateImages(imageArray) {
const imageCollection = ee.ImageCollection(imageArray);
const compositeImage = imageCollection.max();
const serializedCompositeImage = compositeImage.serialize();
return JSON.stringify(serializedCompositeImage);
}

// Receive serialized object and decode it to an ee.Image object
const returnedSerializedObject = manipulateImages(arrayOfImages);
const compositeImage = ee.Deserializer.decode(JSON.parse(returnSerializedObject));

Hope this helps anyone with a similar issue.