通过文生图模型在 Scratch 3 背景区生成图片

经过在角色区和造型区成功生成图片的历程之后，最后的任务就是在背景区通过文生图模型生成图片了。这次任务相对来说也是最简单的一步，因为它和之前的逻辑非常相似，只是在 Scratch 3 的背景区操作图片。

遇到的问题

在实现背景区生成图片时，我已经有了之前的角色和造型区开发的经验，因此这次遇到的挑战并不多。主要需要注意的是，背景的处理和造型类似，但需要确保它被设置为舞台的当前背景。

解决方法

这里同样使用了 TextGeneratedPic 方法来处理图片的生成。我们通过文生图模型获取到的图片 URL，然后调用 addBackdropToStage 方法将该图片设置为背景。

关键代码

async TextGeneratedPic(args, util) {
    const imageUrl = this.imageUrl
    const stage = this.runtime.getTargetForStage()
    await this.addBackdropToStage(stage, imageUrl, util)
}

这段代码的作用是获取舞台对象 stage，并将图片 URL 传递给 addBackdropToStage 方法，以完成背景的设置。

背景的处理与添加

async addBackdropToStage(stage, imageUrl, util) {
    try {
      const response = await fetch(imageUrl)
      const blob = await response.blob()
      const imageBitmap = await createImageBitmap(blob)
      const extractedContent = this.imageUrl.split('.png')[0]

      const md5 = extractedContent

      const canvas = document.createElement('canvas')
      canvas.width = imageBitmap.width
      canvas.height = imageBitmap.height
      const context = canvas.getContext('2d')
      context.drawImage(imageBitmap, 0, 0)

      const pngDataUrl = canvas.toDataURL('image/png')
      const base64Data = pngDataUrl.split(',')[1]

      const binaryString = atob(base64Data)
      const binaryLen = binaryString.length
      const bytes = new Uint8Array(binaryLen)
      for (let i = 0; i < binaryLen; i++) {
        const ascii = binaryString.charCodeAt(i)
        bytes[i] = ascii
      }

      const backdrop = {
        asset: null,
        md5: `${md5}.png`,
        name: this.fileName + new Date().getTime(),
        bitmapResolution: 2,
        rotationCenterX: imageBitmap.width / 2,
        rotationCenterY: imageBitmap.height / 2,
        skinId: null,
        dataFormat: 'png'
      }

      const storage = stage.runtime.storage
      const asset = storage.createAsset(
        AssetType.ImageBitmap,
        'png',
        bytes,
        md5
      )

      backdrop.asset = asset
      backdrop.assetId = asset.assetId

      const skinId = await stage.runtime.renderer.createBitmapSkin(imageBitmap, backdrop.bitmapResolution)
      backdrop.skinId = skinId

      console.log(stage.sprite, 'stage.sprite')

      stage.sprite.costumes.push(backdrop)
      stage.setCostume(stage.sprite.costumes.length - 1)
      this.runtime.emit("SAY", util.target, "say", '')
      console.log('背景已成功添加并设置为当前背景')
    } catch (error) {
      console.error('添加背景时出错:', error)
    }
}