Skip to main content

Frame Step

Frame Element

The frame step allows users to pick between a list of assets that your uploaded image can sit and be adjusted in which are configured in the workflow editor.

Selecting a Frame​

The base option type for a frame step can be undefined. If you wish to select a variant a base option type containing a frame asset must be configured. After configuring an option with multiple frames in the hub you may select a specific frame by passing the corresponding variant to the selectVariant function.

await frameStep.selectVariant(variant);

Selecting a Image​

This function will set the image currently contained by this frame. To upload and retrieve image assets, see User Assets.

frameStep.selectImage(asset);

Frame data change callback​

You can pass a custom callback function into onFrameDataChanged that will execute once the frame data change has completed. Example usecases is to track the state of the frame data thats currently in use. This function will not execute until there is a valid frame service instance.

frameStep.onFrameDataChanged(frameData);

Get image data​

At any time you may get the image data which is the currently set image of the frame.

frameStep.getImageData();

Get current frame step​

The frame step allows you to get the current state of the frame step. There are 3 states the frame step can be in

  • FrameStep.SelectFrame - You can display list of frame variants to the user.
  • FrameStep.SelectImage - You can provide a upload button for the user to upload their custom image.
  • FrameStep.Position - You can provide visual feedback to the user that their uploaded image is being processed.

You can use these states to determine what functionality to display to the user.

frameStep.getCurrentFrameStep(frameData, uploading?, imageUploadComplete?, variants?);

Get frame service​

At any time you may get the current frame service instance to access helper methods specific to the frame step.

frameStep.getFrameService();

Check for overlay image key​

An overlayImageKey is an asset that will be placed over the top of the adjust frame editor. This can be used to help the user position their image in the frame correctly. Call this function any time to check if an overlay image key has been configured in the workflow editor.

frameStep.hasOverlayImageKey();