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

本文会详细介绍如何向画布中插入外部图像。效果如下图所示：

Web组件不支持直接访问鸿蒙本地目录，所以需要将利用arkts将图像转换为base64形式才可以插入图像到画布。

首先需要用arkts实现一个InsertImage函数，用于选择本地图像，然后将其转换为base64编码，并调用js函数插入图像到画布，该函数的代码如下：

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}`);
    })
  }

这段代码的实现目的是在一个ArkTS环境中，通过文件选择器选择一个图片文件，然后将该图片读取并编码为Base64格式的字符串，最后通过执行JavaScript代码将该图片插入到页面中。以下是对代码的详细解释：

初始化变量和文件选择选项

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

1. uris: 定义一个字符串数组，用于存储用户选择的文件路径。
2. documentSelectOptions: 创建一个文件选择选项的实例。
3. documentSelectOptions.fileSuffixFilters：设置文件后缀过滤器，限制用户只能选择指定格式（.png, .jpg, .jpeg, .webp）的图片文件。
4. documentSelectOptions.maxSelectNumber: 设置最大选择文件数量为1，即一次只能选择一个文件。

创建文件选择器实例并选择文件

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

1. documentViewPicker：创建一个文件选择器实例。
2. documentViewPicker.select：调用select方法，传入文件选择选项，打开文件选择对话框。该方法返回一个Promise，选择成功后返回一个包含所选文件路径的数组。

处理文件选择结果

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. uris = documentSelectResult: 将选择的文件路径存储到uris数组中。
2. fs.openSync：以只读模式打开选择的文件，并返回一个文件描述符。
3. buffer = new ArrayBuffer(40960000): 创建一个大小为40960000字节的缓冲区，用于存储文件数据。
4. fs.readSync: 从文件中读取数据到缓冲区，并返回读取的字节数。
5. actualBuffer = buffer.slice(0, readLen): 截取实际读取的字节缓冲区。

用于将图像转换为base64编码的函数代码如下：

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;
}

最关键的是addImage函数，这是js实现的函数，用于将图像插入到画布中，代码如下：

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);
    });

}

fromURL函数是Fabric.js库中的一个方法，用于从给定的URL加载图像，并在回调函数中提供一个fabric.Image实例，以便对图像进行进一步操作。以下是对这段代码的详细解释：

函数定义

function addImage(src) {

定义一个名为addImage的函数，该函数接受一个参数src，表示图像的URL。

使用fabric.Image.fromURL加载图像

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

• fabric.Image.fromURL: 这是Fabric.js库提供的一个静态方法，用于从指定的URL加载图像。该方法需要两个参数：
  • src: 图像的URL。
  • callback: 当图像加载完成后执行的回调函数，回调函数的参数是一个fabric.Image实例。

调整图片尺寸

const scale = Math.min(
    150 / oImg.width,
    150 / oImg.height
);
oImg.scale(scale).set({
    left: 20,
    top: 20
});

• const scale = Math.min(150 / oImg.width, 150 / oImg.height): 计算图像缩放比例，使图像的宽度或高度最大为150像素，保持图像的纵横比。Math.min确保缩放比例不会超过指定的尺寸。
• oImg.scale(scale): 按照计算的比例缩放图像。
• oImg.set({ left: 20, top: 20 }): 设置图像的位置，将其左上角放置在canvas的坐标(20, 20)处。

将图片添加到canvas

canvas.add(oImg);

将调整后的图像添加到Fabric.js的canvas对象中，显示在画布上。

总结

整个函数的实现步骤如下：

1. 定义addImage函数，并接收一个图像的URL作为参数。
2. 使用fabric.Image.fromURL从给定的URL加载图像。
3. 在图像加载完成后的回调函数中，对图像进行处理：
   • 计算图像的缩放比例，使其宽度或高度最大为150像素，并保持纵横比。
   • 按照计算的比例缩放图像，并设置其位置。
4. 将处理后的图像添加到Fabric.js的canvas对象中，显示在画布上。

通过这些步骤，addImage函数可以从指定的URL加载图像，并在画布上显示缩放和定位后的图像。