背景知识：

方法一：

直接 Canvas 的绘制方法，将 OffscreenCanvasRenderingContext2D 对象生成一个 PixelMap 对象，将其对象存储到相册中。

方法二：

还可以使用 组件截图 通过 componentSnapshot.get(“root”, (error: Error, pixmap: image.PixelMap) =>{})来获取一个 PixelMap 对象

问题解决：

代码实例：

import { thermal } from '@kit.BasicServicesKit';
import { image } from '@kit.ImageKit';
import { AppUtils } from '../utils/AppUtils';
import { common } from '@kit.AbilityKit';
import { componentSnapshot } from '@kit.ArkUI';


@Entry
@Component
struct CommonPage {
    @State message: string = 'Hello componentSnapshot';
    @State message2: string = 'development';
    private baseContext = this.getUIContext().getHostContext() as common.UIAbilityContext
    timeoutIndex: number = 0
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
    private offCanvas: OffscreenCanvas = new OffscreenCanvas(300, 300)
    private offContext?: OffscreenCanvasRenderingContext2D

    private snapshotPixmap:image.PixelMap | undefined


    build() {
        Column() {
            //使用 Canvas绘制一个图片
            Canvas(this.context)
                .width(300)
                .height(300)
                .backgroundColor('#ffff00')
                .onReady(() => {
                    this.offContext = this.offCanvas.getContext('2d', this.settings)
                    //设置一个区域
                    this.offContext.fillRect(0, 0, this.context.width, this.context.height)
                    //设置背景颜色
                    this.offContext.fillStyle = "#F0F0F0"
                    // ctx.font = 'font-style font-weight font-size font-family'
                    this.offContext.font = "18vp"
                    this.offContext.textAlign = "start"
                    this.offContext.textBaseline = "middle"
                    this.offContext.fillText(this.message, 100, 100)
                    this.offContext.fillText(this.message2, 100, 200)
                    let image = this.offCanvas.transferToImageBitmap()
                    this.context.transferFromImageBitmap(image)

                }).id("myCanvas")

            //方法一： 使用offContext的PixelMap
            Button("保存 Canvas")
                .fontSize(20)
                .fontColor(Color.White)
                .fontWeight(FontWeight.Bold)
                .onClick(() => {
                    const image = this.offContext?.getPixelMap(0,0,300,300)
                    AppUtils.savePixelMapToAlbum(this.baseContext,image!!)

                })

            方法二：使用componentSnapshot来获取
            Button("保存 componentSnapshot")
                .fontSize(20)
                .fontColor(Color.White)
                .fontWeight(FontWeight.Bold)
                .onClick(() => {
                    //注意：这里的id必须添加
                    componentSnapshot.get("myCanvas", (error: Error, pixmap: image.PixelMap) => {
                        if (error) {
                            console.error("error: " + JSON.stringify(error))
                            return;
                        }
                        this.snapshotPixmap = pixmap
                        AppUtils.savePixelMapToAlbum(this.baseContext,this.snapshotPixmap)
                    }, { scale: 2, waitUntilRenderFinished: true })
                })

        }
        .height('100%')
        .width('100%')
    }
}



//工具类：
import { image } from "@kit.ImageKit";
import { bundleManager, common } from "@kit.AbilityKit";
import { photoAccessHelper } from "@kit.MediaLibraryKit";
import { fileIo, fileUri, ReadOptions, WriteOptions } from "@kit.CoreFileKit";


export class AppUtils {

    static async savePixelMapToAlbum(context: common.UIAbilityContext, pixelMap: image.PixelMap) {
        try {

            const imagePackerApi = image.createImagePacker();
            const buffer = await imagePackerApi.packToData(pixelMap, { format: 'image/png', quality: 100 })
            const filePath = context?.filesDir + `/${(new Date).getTime()}.png`
            try {
                const file = fileIo.openSync(filePath, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE)
                fileIo.writeSync(file.fd, buffer)
                fileIo.closeSync(file.fd)

                const config: photoAccessHelper.PhotoCreationConfig[] = []
                config.push({
                    fileNameExtension: 'png',
                    photoType: photoAccessHelper.PhotoType.IMAGE,
                })

                const phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context)
                const srcUri = [fileUri.getUriFromPath(filePath)]
                const desUris = await phAccessHelper.showAssetsCreationDialog(srcUri, config)
                AppUtils.copyToPhoto(filePath, desUris[0])

            } catch (error) {
                console.error(JSON.stringify(error))
            }

        } catch (error) {
            console.error(`操作失败: ${error.code}, ${error.message}`);
        }

    }

    // 保存到指定路径
    private static copyToPhoto(srcFilePath: string, destFilePath: string) {
        const srcFile = fileIo.openSync(srcFilePath, fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE)
        const destFile = fileIo.openSync(destFilePath, fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE)
        // 读取源文件内容并写入至目的文件
        const stat = fileIo.statSync(srcFilePath)
        const bufSize = stat.size;
        let readSize = 0;
        const buf = new ArrayBuffer(bufSize);
        const readOptions: ReadOptions = {
            offset: readSize,
            length: bufSize
        };
        let readLen = fileIo.readSync(srcFile.fd, buf, readOptions);
        while (readLen > 0) {
            readSize += readLen;
            let writeOptions: WriteOptions = {
                length: readLen
            };
            fileIo.writeSync(destFile.fd, buf, writeOptions);
            readOptions.offset = readSize;
            readLen = fileIo.readSync(srcFile.fd, buf, readOptions);
        }
        // 关闭文件
        fileIo.closeSync(srcFile);
        fileIo.closeSync(destFile);
    }
}

演示：