#HarmonyOS NEXT体验官# 基于鸿蒙Next的App（创意工坊）解析5：插入外部图像 原创

insertImage() {
    let uris: Array<string> = [];
    const documentSelectOptions = new picker.DocumentSelectOptions();
    documentSelectOptions.fileSuffixFilters = ['.png', '.jpg', '.jpeg', '.webp']
    documentSelectOptions.maxSelectNumber = 1;
    const documentViewPicker = new picker.DocumentViewPicker(); // 创建文件选择器实例
    documentViewPicker.select(documentSelectOptions).then((documentSelectResult: Array<string>) => {
      uris = documentSelectResult;
      let file = fs.openSync(uris[0], fs.OpenMode.READ_ONLY);
      let buffer = new ArrayBuffer(40960000);
      let readLen = fs.readSync(file.fd, buffer);
      let actualBuffer = buffer.slice(0, readLen);
      let base64 = new util.Base64Helper();
      let array = new Uint8Array(actualBuffer);
      let result = base64.encodeToStringSync(array)
      // 将实际读取的字节转换为 Base64 编码
      let imageBase64 = convertToWebBase64Url(uris[0], result);
      console.info('readSync data to file succeed and buffer size is:' + readLen);
      fs.closeSync(file);
      this.controller1.runJavaScript(`addImage("${imageBase64}")`)

      console.info('documentViewPicker.select to file succeed and uris are:' + uris);
    }).catch((err: BusinessError) => {
      console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
    })
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

let uris: Array<string> = []; 
const documentSelectOptions = new picker.DocumentSelectOptions();
documentSelectOptions.fileSuffixFilters = ['.png', '.jpg', '.jpeg', '.webp'];
documentSelectOptions.maxSelectNumber = 1;
1.
2.
3.
4.

const documentViewPicker = new picker.DocumentViewPicker();
documentViewPicker.select(documentSelectOptions).then((documentSelectResult: Array<string>) => {
1.
2.

uris = documentSelectResult;
let file = fs.openSync(uris[0], fs.OpenMode.READ_ONLY);
let buffer = new ArrayBuffer(40960000);
let readLen = fs.readSync(file.fd, buffer);
let actualBuffer = buffer.slice(0, readLen);
1.
2.
3.
4.
5.

export function convertToWebBase64Url(uri: string, base64Data: string): string | null {
    // 解析文件扩展名
    const extension = uri.split('.').pop()?.toLowerCase();

    // 支持的图像文件扩展名列表
    const imageExtensions = ['png', 'jpg', 'jpeg','webp','svg','gif'];

    // 检查文件扩展名是否为支持的图像格式
    if (extension && imageExtensions.includes(extension)) {
        // 创建 Web Base64 URL
        const mimeType = `image/${extension === 'jpg' ? 'jpeg' : extension}`;
        return `data:${mimeType};base64,${base64Data}`;
    }

    // 如果不是图像文件，返回 null
    return null;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

function addImage(src) {

    // 使用fabric.Image.fromURL来加载并添加图片
    fabric.Image.fromURL(src, function(oImg) {
        // 调整图片尺寸以适应canvas
        const scale = Math.min(
            150 / oImg.width,
            150 / oImg.height
        );
        oImg.scale(scale).set({
            left: 20,
            top: 20
        });

        // 将图片添加到canvas
        canvas.add(oImg);
    });

}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

function addImage(src) {
1.

fabric.Image.fromURL(src, function(oImg) {
1.

const scale = Math.min(
    150 / oImg.width,
    150 / oImg.height
);
oImg.scale(scale).set({
    left: 20,
    top: 20
});
1.
2.
3.
4.
5.
6.
7.
8.

canvas.add(oImg);
1.