Skip to content

Create From Image

Starting from an existing image allows you to use the editor for customizing individual assets. This is done by using suspend fun createFromImage(imageUri: URI, dpi: Float = 300F, pixelScaleFactor: Float = 1F): DesignBlock and passing a URI as argument. The dpi argument sets the dots per inch of the scene. The pixelScaleFactor sets the display’s pixel scale factor.

Create a Scene From an Image URL

In this example, we will show you how to initialize the CreativeEditor SDK with an initial image. Create an instance of Uri using the remote url. Use the object imageRemoteUri as a source for the initial image.

val imageRemoteUri = Uri.parse("https://img.ly/static/ubq_samples/sample_4.jpg")
val scene = engine.scene.createFromImage(imageRemoteUri)

We can retrieve the graphic block id of this initial image using fun findByType(blockType: DesignBlockType): List<DesignBlock>. Note that that function returns an array. Since there’s only a single graphic block in the scene, the block is at index 0.

// Find the automatically added graphic block in the scene that contains the image fill.
val block = engine.block.findByType(DesignBlockType.Graphic).first()

We can then manipulate and modify this block. Here we modify its opacity with fun setOpacity(block: DesignBlock, @FloatRange(from = 0.0, to = 1.0) value: Float). See Modifying Scenes for more details.

// Change its opacity.
engine.block.setOpacity(block, value = 0.5F)

When starting with an initial image, the scene’s page dimensions match the given resource and the scene is configured to be in pixel design units.

To later save your scene, see Saving Scenes.

import android.net.Uri
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.launch
import ly.img.engine.DesignBlockType
import ly.img.engine.Engine


fun createSceneFromImageURL(
    license: String,
    userId: String,
) = CoroutineScope(
    Dispatchers.Main,
).launch {
    val engine = Engine.getInstance(id = "ly.img.engine.example")
    engine.start(license = license, userId = userId)
    engine.bindOffscreen(width = 100, height = 100)


    val imageRemoteUri = Uri.parse("https://img.ly/static/ubq_samples/sample_4.jpg")
    val scene = engine.scene.createFromImage(imageRemoteUri)


    // Find the automatically added graphic block in the scene that contains the image fill.
    val block = engine.block.findByType(DesignBlockType.Graphic).first()


    // Change its opacity.
    engine.block.setOpacity(block, value = 0.5F)


    engine.stop()
}

Create A Scene From an Image Blob

In this example, we will show you how to initialize the CreativeEditor SDK with an initial image provided from a blob. First, get hold of a blob by fetching an image from the web. This is just for demonstration purposes and your blob object may come from a different source.

val blobUrl = URL("https://img.ly/static/ubq_samples/sample_4.jpg")
val blob = withContext(Dispatchers.IO) {
    val outputStream = ByteArrayOutputStream()
    blobUrl.openStream().use { inputStream ->
        outputStream.use(inputStream::copyTo)
    }
    outputStream.toByteArray()
}

Afterward, create a temporary file and save the Data. Create an instance of Uri using the temporary file.

val blobFile = withContext(Dispatchers.IO) {
    File.createTempFile(UUID.randomUUID().toString(), ".tmp").apply {
        outputStream().use { it.write(blob) }
    }
}
val blobUri = Uri.fromFile(blobFile)

Use the object blobUri as a source for the initial image.

val scene = engine.scene.createFromImage(blobUri)

We can retrieve the graphic block id of this initial image using fun findByType(blockType: DesignBlockType): List<DesignBlock>. Note that that function returns a list. Since there’s only a single graphic block in the scene, the block is at index 0.

// Find the automatically added graphic block in the scene that contains the image fill.
val block = engine.block.findByType(DesignBlockType.Graphic).first()

We can then manipulate and modify this block. Here we modify its opacity with fun setOpacity(block: DesignBlock, @FloatRange(from = 0.0, to = 1.0) value: Float). See Modifying Scenes for more details.

// Change its opacity.
engine.block.setOpacity(block, value = 0.5F)

When starting with an initial image, the scenes page dimensions match the given image, and the scene is configured to be in pixel design units.

To later save your scene, see Saving Scenes.

Full Code

Here’s the full code:

import android.net.Uri
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.launch
import kotlinx.coroutines.withContext
import ly.img.engine.DesignBlockType
import ly.img.engine.Engine
import java.io.ByteArrayOutputStream
import java.io.File
import java.net.URL
import java.util.UUID


fun createSceneFromImageBlob(
    license: String,
    userId: String,
) = CoroutineScope(
    Dispatchers.Main,
).launch {
    val engine = Engine.getInstance(id = "ly.img.engine.example")
    engine.start(license = license, userId = userId)
    engine.bindOffscreen(width = 100, height = 100)


    val blobUrl = URL("https://img.ly/static/ubq_samples/sample_4.jpg")
    val blob = withContext(Dispatchers.IO) {
        val outputStream = ByteArrayOutputStream()
        blobUrl.openStream().use { inputStream ->
            outputStream.use(inputStream::copyTo)
        }
        outputStream.toByteArray()
    }


    val blobFile = withContext(Dispatchers.IO) {
        File.createTempFile(UUID.randomUUID().toString(), ".tmp").apply {
            outputStream().use { it.write(blob) }
        }
    }
    val blobUri = Uri.fromFile(blobFile)


    val scene = engine.scene.createFromImage(blobUri)


    // Find the automatically added graphic block in the scene that contains the image fill.
    val block = engine.block.findByType(DesignBlockType.Graphic).first()


    // Change its opacity.
    engine.block.setOpacity(block, value = 0.5F)


    engine.stop()
}