HarmonyOS鸿蒙Next中web和H5交互图片的base64数据

参考如下demo：

//.ets文件

import web_webview from '@ohos.web.webview';
import business_error from '@ohos.base';
import { buffer } from '@kit.ArkTS';
import { fileIo } from '@kit.CoreFileKit';
import { common } from '@kit.AbilityKit';
import { fileUri } from "@kit.CoreFileKit";
import { hilog } from '@kit.PerformanceAnalysisKit';

let context = getContext(this) as common.UIAbilityContext;
let filesDir = context.filesDir;

// data为需要转换的base64字符串，返回沙箱路径uri
export async function writeFile(data: string): Promise<string> {
    let uri = '';
    try {
        let filePath = filesDir + "/1.png";
        uri = fileUri.getUriFromPath(filePath);
        let file = fileIo.openSync(filePath, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);
        console.info("file fd: " + file.fd);
        const reg = new RegExp("data:image/\\w+;base64,");
        const base64 = data.replace(reg, "");
        console.log("base64flag", base64)
        const dataBuffer = buffer.from(base64, 'base64')
        let writeLen = fileIo.writeSync(file.fd, dataBuffer.buffer);
        hilog.info(0xA0c0d0,'uri',uri)
        fileIo.closeSync(file);
    } catch (Error) {
        hilog.error(0xA0c0d0,'Error',Error.code)
    }
    return uri;
}

class User {
    private name: string = "LiHua"
    private age: number = 0
    constructor() {}
    getNameWithAge(): string {
        return `name:${this.name},age:${this.age}`
    }
}

@Entry
@Component
struct Index {
    controller: web_webview.WebviewController = new web_webview.WebviewController();
    @State user: User = new User()
    @State sendFromEts: string = 'Send this message from ets to HTML';
    @State receivedFromHtml: string = 'Display received message send from HTML';

    ports: web_webview.WebMessagePort[] = [];

    writeFile1(data:string){
        let uri = '';
        try {
            let filePath = filesDir + "/1.png";
            uri = fileUri.getUriFromPath(filePath);
            let file = fileIo.openSync(filePath, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);
            console.info("file fd: " + file.fd);
            const reg = new RegExp("data:image/\\w+;base64,");
            const base64 = data.replace(reg, "");
            console.log("base64flag", base64)
            this.sendFromEts = base64
            const dataBuffer = buffer.from(base64, 'base64')
            let writeLen = fileIo.writeSync(file.fd, dataBuffer.buffer);
            hilog.info(0xA0c0d0,'uri',uri)
            fileIo.closeSync(file);
        } catch (Error) {
            hilog.error(0xA0c0d0,'Error',Error.code)
        }
        return uri;
    }

    aboutToAppear(){
        // 配置Web开启调试模式
        web_webview.WebviewController.setWebDebuggingAccess(true);
    }

    build(){
        Column () {
            // 通信，展示接收到的来自HTML的内容
            Text(this.receivedFromHtml)
            // 输入框的内容发送到HTML
            TextInput({ placeholder: 'Send this message from ets to HTML' })
                .onChange((value: string) => {
                    this.sendFromEts = value;
                })
            Button("调用h5的方法").onClick(() => this.controller.runJavaScript('setH1Title()'))
            //注册
            Button('注册')
                .onClick(() => {
                    try {
                        // 1、创建两个消息端口。
                        this.ports = this.controller.createWebMessagePorts();
                        // 2、在应用侧的消息端口(如端口1)上注册回调事件。
                        this.ports[1].onMessageEvent((result: web_webview.WebMessage) => {
                            let msg = 'Got msg from HTML:';
                            if (typeof(result) === 'string') {
                                console.info(`received string message from html5, string is: ${result}`);
                                msg = msg + result;
                            } else if (typeof(result) === 'object') {
                                if (result instanceof ArrayBuffer) {
                                    console.info(`received arraybuffer from html5, length is: ${result.byteLength}`);
                                    msg = msg + 'length is ' + result.byteLength;
                                } else {
                                    console.info('not support');
                                }
                            } else {
                                console.info('not support');
                            }
                            this.receivedFromHtml = msg;
                        })
                        // 3、将另一个消息端口(如端口0)发送到HTML侧，由HTML侧保存并使用。
                        this.controller.postMessage('__init_port__', [this.ports[0]], '*');
                    } catch (error) {
                        let e: business_error.BusinessError = error as business_error.BusinessError;
                        console.error(`ErrorCode: ${e.code}, Message: ${e.message}`);
                    }
                })
            // 4、使用应用侧的端口给另一个已经发送到html的端口发送消息。
            Button('SendDataToHTML')
                .onClick(() => {
                    try {
                        if (this.ports && this.ports[1]) {
                            this.writeFile1('测试测试')
                            this.ports[1].postMessageEvent(this.sendFromEts);
                        } else {
                            console.error(`ports is null, Please initialize first`);
                        }
                    } catch (error) {
                        let e: business_error.BusinessError = error as business_error.BusinessError;
                        console.error(`ErrorCode: ${e.code}, Message: ${e.message}`);
                    }
                })
            // 组件创建时，通过$rawfile加载本地文件local.html
            Web({ src: $rawfile("index1.html"), controller: this.controller })
            // 将对象注入到web端
            .javaScriptProxy({
                object: this.user,
                name: "user",
                methodList: ["getNameWithAge"],
                controller: this.controller
            })
        }
        .width("100%")
        .height("100%")
    }
}