Interface InfiniteImageInterface

The InfiniteImageInterface is a 2D image.

It is the attachment of the InfiniteEngineInterfaceSignal.ScreenshotReady signal sent by the InfiniteEngineInterface when the given screenshot request has terminated. There may be multiple screenshot requests running simultaneously.

This object stores information about an image (width, height, format, data). The format has the same values as the type parameter used by HTMLCanvasElement.toDataURL() or HTMLCanvasElement.toBlob() and thus depends on your browser capabilities: usually 'image/png', 'image/jpeg' are at least handled. The API adds the 'image/raw' type, which is the data in RGB or RGBA unsigned bytes. If the format is 'image/raw' type, then the components field tells the number of components the image is composed of (3 for RGB, 4 for RGBA). If the format is not 'image/raw', then components is set to 0, since data is encoded, depending on the format.

Obviously, the width and height parameters tells the size of the resulting image.

The base64 field tells about the type of data : if set to true, then data is base64 encoded, and thus data will be of the string type, if set to false, the data is an Uint8Array.

The screenshotid field is the value returned by InfiniteEngineInterface.screenshot to allow matching the result with the requested screenshot.

If an error occurs, an invalid image is returned, with a data equal to undefined, and width and height set to 0.

/** 
 * Sample to illustrate the screenshot procedure of the InfiniteEngineInterface.
 */
import {
    InfiniteEngineInterface, LoadingStates, Vector3, InfiniteEngineLoadingStateAttachment,
    InfiniteEngineInterfaceSignal, InfiniteEvent, InfiniteImageInterface, ScreenshotType
} from 'generated_files/documentation/appinfiniteapi';

// We try to make a screenshot when all data is loaded

// the div to render the 3D display
let lView3D: HTMLElement;

// created previously, should receive the image data to be displayed to the user (or ask for a download maybe ?)
let lImageData : HTMLImageElement;

// created previously the position of the camera for the screenshot
let lCameraLocation : Vector3;

// created previously the camera center of interest
let lCenterOfInterest : Vector3;

// created previously the 3D engine
let lInfiniteEngine: InfiniteEngineInterface;

let lScreenshotId : string = '';
// What to do when screenshot is ready ?
let onScreenshotReady : (pEvent : InfiniteEvent, _pCallbackData) => void = undefined;

// What to do when all data is loaded ?
let onDataStateChanged : (pEvent : InfiniteEvent, _pCallbackData) => void = undefined;

// bind the 3D rendering to the div (should have been done earlier :) )
lInfiniteEngine.setView(lView3D);

// we will make screenshot of 1024x1024
lInfiniteEngine.setFixedResolution(1024, 1024, 1);

lInfiniteEngine.addEventListener(InfiniteEngineInterfaceSignal.LoadingStateChanged, onDataStateChanged);
lInfiniteEngine.addEventListener(InfiniteEngineInterfaceSignal.ScreenshotReady, onScreenshotReady);

// go to the expected position / location
lInfiniteEngine.getCameraManager().setCameraLocation(lCameraLocation);
lInfiniteEngine.getCameraManager().lookAt(lCenterOfInterest, 0);

// ####################################################################################################################################
// ############################################ Screenshot ############################################################################
// ####################################################################################################################################

// What to do when state changes ? We wait till everything is loaded and then make a screenshot
onDataStateChanged = (pEvent : InfiniteEvent, _pCallbackData) : void =>
{
    // check the attachment
    const lStateAttachment : InfiniteEngineLoadingStateAttachment = pEvent.attachments;

    // some check, but useless, only for illustration purpose
    console.assert(lStateAttachment.newLoadingState === lInfiniteEngine.getResourceLoadingState());

    switch (lStateAttachment.newLoadingState)
    {
        case LoadingStates.S_Loading:
            // do nothing if we are still loading
            return;
        case LoadingStates.S_OutOfBudget:
            // some fancy message
            console.log('Taking a screenshot without everything loaded');
            // but we still make a screenshot :)
            break;
        default:
            break;
    }
    // make a screenshot request in jpeg with 95% quality, data will be base64 encoded
    lScreenshotId = lInfiniteEngine.screenshot(ScreenshotType.ST_Color, true, 'image/jpeg', 0.95);
    if (lScreenshotId.length === 0)
    {
        // for some reason, this failed
        console.log('Screenshot request failed');
    }
};

// what to do when we get the screenshot result ?
onScreenshotReady = (pEvent : InfiniteEvent, _pCallbackData) : void =>
{
    // the image result
    const lInfiniteImage : InfiniteImageInterface = pEvent.attachments;

    // if the id does not match, bail out
    if (lInfiniteImage.screenshotid !== lScreenshotId)
    {
        console.log('This is not the expected screenshot id, aborting');
        return;
    }

    // is the image valid ? and base64 encoded ?
    if ((lInfiniteImage.width === 0) || (!lInfiniteImage.data) || (!lInfiniteImage.base64))
    {
        console.log('Unexpected screenshot error, aborting');
        return;
    }

    // create the data url in base64
    // even if we did not get the expected format, we still get the result
    const lDataUrl : string = 'data:' + lInfiniteImage.format + ';base64,' + lInfiniteImage.data;

    // resize the image markup
    lImageData.width = lInfiniteImage.width;
    lImageData.height = lInfiniteImage.height;
    // and set data
    lImageData.src = lDataUrl;

    // we get back to the size of the 3d view but this is up to the application needs
    lInfiniteEngine.unsetFixedResolution();
};

Copy

or asynchronously :

/** 
 * Sample to illustrate the asynchronous screenshot procedure of the InfiniteEngineInterface.
 */
import {
    InfiniteEngineInterface, LoadingStates, Vector3,
    InfiniteImageInterface, ScreenshotType, AsyncDataLoadedResult, AsyncResultReason, AsyncScreenshotResult
} from 'generated_files/documentation/appinfiniteapi';

// We try to make a screenshot when all data is loaded

// the div to render the 3D display
let lView3D: HTMLElement;

// created previously, should receive the image data to be displayed to the user (or ask for a download maybe ?)
let lImageData : HTMLImageElement;

// created previously the position of the camera for the screenshot
let lCameraLocation : Vector3;

// created previously the camera center of interest
let lCenterOfInterest : Vector3;

// created previously the 3D engine
let lInfiniteEngine: InfiniteEngineInterface;

const takeScreenshot = async () : Promise<void> =>
{
    // bind the 3D rendering to the div (should have been done earlier :) )
    lInfiniteEngine.setView(lView3D);

    // we will make screenshot of 1024x1024
    lInfiniteEngine.setFixedResolution(1024, 1024, 1);

    // go to the expected position / location
    lInfiniteEngine.getCameraManager().setCameraLocation(lCameraLocation);
    lInfiniteEngine.getCameraManager().lookAt(lCenterOfInterest, 0);

    // What to do when all data is loaded ?
    const lDataLoaded : AsyncDataLoadedResult = await lInfiniteEngine.asyncWaitForDataLoaded();
    if (lDataLoaded.reason !== AsyncResultReason.ARR_Success || lDataLoaded.value === undefined)
    {
        // this is an error that should not happen (perhaps the engine interface has been destroyed ?)
        console.log('screenshot procedure failed for some reason');
        return;
    }
    const lDataLoadedState : LoadingStates = lDataLoaded.value.newLoadingState;
    switch (lDataLoadedState)
    {
        case LoadingStates.S_Loading:
            // this is an unexpected error
            console.log('unexpected error');
            return;
        case LoadingStates.S_OutOfBudget:
            // some fancy message
            console.log('Taking a screenshot without everything loaded');
            // but we still make a screenshot :)
            break;
        default:
            break;
    }
    const lScreenshot : AsyncScreenshotResult = await lInfiniteEngine.asyncScreenshot(ScreenshotType.ST_Color, true, 'image/jpeg', 0.95);
    if (lScreenshot.reason !== AsyncResultReason.ARR_Success || lScreenshot.value === undefined)
    {
        // this is an error that may happen (perhaps the engine interface has been destroyed ?, or bad inputs ?)
        console.log('screenshot procedure failed for some reason');
        return;
    }
    // What to do when screenshot is ready ?

    // the image result
    const lInfiniteImage : InfiniteImageInterface = lScreenshot.value;

    // is the image valid ? and base64 encoded ?
    if ((lInfiniteImage.width === 0) || (!lInfiniteImage.data) || (!lInfiniteImage.base64))
    {
        console.log('Unexpected screenshot error, aborting');
        return;
    }

    // create the data url in base64
    // even if we did not get the expected format, we still get the result
    const lDataUrl : string = 'data:' + lInfiniteImage.format + ';base64,' + lInfiniteImage.data;

    // resize the image markup
    lImageData.width = lInfiniteImage.width;
    lImageData.height = lInfiniteImage.height;
    // and set data
    lImageData.src = lDataUrl;

    // we get back to the size of the 3d view but this is up to the application needs
    lInfiniteEngine.unsetFixedResolution();
};

takeScreenshot();

Copy

Please make sure the destination browser supports promises before using async calls.