【鸿蒙开发实战篇】滤镜效果图高效分享

大家好，我是 V 哥。今天我们来探讨在鸿蒙 6.0（API 21）开发中，如何将处理后的 PixelMap 图像（如滤镜效果图）通过 Share Kit 高效分享至微博、微信等社交平台。以下是完整的实现方案和步骤详解，附关键代码案例👇

联系V哥获取鸿蒙学习资料

一、核心流程与依赖准备

技术路线 ：
PixelMap → 临时文件 → Share Kit 系统分享面板 → 社交平台

环境配置
在 module.json5 中添加权限与依赖：

json 复制代码

{
  "module": {
    "dependencies": {
      "@ohos.multimedia.image": "^1.0",    // 图片处理
      "@ohos.file.picker": "^1.0",         // 文件选择
      "@ohos.app.ability.dataShare": "^1.0" // Share Kit
    },
    "requestPermissions": [
      {
        "name": "ohos.permission.READ_IMAGEVIDEO"  // 读取媒体文件
      },
      {
        "name": "ohos.permission.WRITE_IMAGEVIDEO" // 写入临时文件
      }
    ]
  }
}

二、将 PixelMap 保存为临时文件 步骤 1：PixelMap 转 Uint8Array

使用 ImagePacker 将处理后的 PixelMap 编码为图片二进制数据：

typescript 复制代码

import image from '@ohos.multimedia.image';
import fs from '@ohos.file.fs';

async function pixelMapToFile(pixelMap: image.PixelMap, fileName: string): Promise<string> {
  // 1. 创建 ImagePacker 实例
  const imagePacker = image.createImagePacker();
  
  // 2. 配置编码参数（JPEG格式）
  const options: image.PackingOptions = {
    format: "image/jpeg",
    quality: 100 // 质量百分比
  };
  
  // 3. 编码为 ArrayBuffer
  const arrayBuffer: ArrayBuffer = await imagePacker.packToBuffer(pixelMap, options);
  
  // 4. 获取临时目录路径
  const tempDir = globalThis.context.filesDir + "/temp/";
  if (!fs.accessSync(tempDir)) {
    fs.mkdirSync(tempDir);
  }
  
  // 5. 写入文件
  const filePath = `${tempDir}${fileName}.jpg`;
  const file = fs.openSync(filePath, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE);
  fs.writeSync(file.fd, arrayBuffer); // 写入二进制数据
  fs.closeSync(file);
  
  return filePath;
}

三、通过 Share Kit 分享文件 步骤 2：调用系统分享接口

利用 DataShareHelper 触发分享面板：

typescript 复制代码

import dataShare from '@ohos.app.ability.dataShare';
import fileUri from '@ohos.file.fileuri';

async function shareImage(filePath: string) {
  // 1. 构造文件 URI
  const uri = fileUri.getUriFromPath(filePath); // 格式：file://com.example.app/temp/filtered_img.jpg
  
  // 2. 创建分享数据
  const dataShareValue: dataShare.DataShareValues = {
    "resourceUri": uri,
    "mimeType": "image/jpeg", // 指定媒体类型
    "title": "分享滤镜效果图"
  };
  
  // 3. 启动分享
  try {
    const result = await dataShare.startShare({
      data: dataShareValue,
      intent: {
        action: "ohos.want.action.sendData", // 系统分享动作
        entities: ["entity.system.share"]    // 分享实体标识
      }
    });
    console.info("分享成功，目标应用：", result.result);
  } catch (error) {
    console.error("分享失败", error.code, error.message);
  }
}

四、完整业务逻辑串联 在 UI 中组合调用：

typescript 复制代码

@Entry
@Component
struct ShareDemo {
  @State filteredPixelMap: image.PixelMap | null = null;

  // 示例：应用滤镜并分享
  async applyFilterAndShare() {
    if (!this.filteredPixelMap) return;
    
    // 1. 保存为临时文件
    const filePath = await pixelMapToFile(this.filteredPixelMap, "vgo_filter_result");
    
    // 2. 触发分享
    await shareImage(filePath);
    
    // 3. 清理临时文件（可选）
    fs.unlinkSync(filePath);
  }

  build() {
    Column() {
      Button('生成滤镜并分享')
        .onClick(async () => {
          // 先执行滤镜处理（此处省略滤镜代码）
          // this.filteredPixelMap = await applyCustomFilter(...);
          await this.applyFilterAndShare();
        })
    }
  }
}

五、避坑指南与性能优化

内存泄漏预防
- 分享完成后立即调用 pixelMap.release() 释放 PixelMap 内存
- 定期清理临时目录：fs.rmdirSync(tempDir)

大文件处理

超过 10MB 的图片建议先压缩：

typescript 复制代码

// 在 pixelMapToFile 中加入缩放逻辑
const scaledPixelMap = await pixelMap.createScaledPixelMap(
  { width: 1080, height: 1920 } // 按需调整尺寸
);

社交平台兼容性
- 微博/微信等平台要求 URI 必须以 file:// 开头
- 部分平台限制图片尺寸，需提前检测：
  typescript 复制代码
```
const info = await pixelMap.getImageInfo();
if (info.size.width > 4096) {
  // 执行缩放...
}
```

六、扩展场景：直接分享 PixelMap 对象（API 21+） 鸿蒙 6.0 支持直接传递 PixelMap 到分享组件：

typescript 复制代码

// 在 DataShareValues 中直接传递 PixelMap
const dataShareValue: dataShare.DataShareValues = {
  "pixelMap": filteredPixelMap, // 关键！直接传递对象
  "mimeType": "pixelmap/jpeg",  // 特殊 MIME 类型
};

// 接收方通过 getPixelMap() 解析
const sharedPixelMap = dataShareIntent.getParameter("pixelMap");

总结通过 PixelMap→临时文件→Share Kit 的三步链路，我们实现了滤镜图片的社交分享。关键点在于：

格式转换 ：用 ImagePacker 高效编码为文件
URI构造 ：fileUri.getUriFromPath() 保证路径合法性
意图分发 ：startShare 调用系统级分享能力

我是 V 哥，下期将揭秘如何用鸿蒙 6.0 的 3D 渲染引擎 实现动态滤镜特效。遇到分享权限问题欢迎留言讨论！