HarmonyOS鸿蒙NEXT中图片上传到阿里OSS文件体积太大，如何在手机端先转换成WebP之后再上传

HarmonyOS鸿蒙NEXT中图片上传到阿里OSS文件体积太大，如何在手机端先转换成WebP之后再上传 由于现在手机拍摄的图片体积都比较大，上传到oss会占用比较大的空间，所以考虑到在上传前先将图片格式转换为webp，之后再上传，现有代码发现转换没有生成目标webp文件，代码如下，求帮忙分析下问题出在何处，如何修改？ fileUris 是从手机相册选择的图片的路径名称的数组

ConvertImagesToCacheDir(fileUris: string[], callback:(imageUris: string[]) => void) {
  console.info('in putObject');
  let imageUris:string[] = []
  const context = getContext()
  let cacheDir = context.cacheDir;
  fileUris.forEach((fileUri)=>{
    let fileType: string | undefined = fileUri.split('.').pop();
    // 生成一个新的文件名
    const fileName = Date.now() + '.webp'
    // 通过缓存路径+文件名 拼接出完整的路径
    const dstPath = cacheDir + '/' + fileName
    // Copy the URI to the cacheDir directory and upload the file.
    convertImageToWebp(fileUri, dstPath, 90)
    imageUris.push(fileName)
  })
  callback(imageUris)
}

export function convertImageToWebp(originPath: string, targetPath: string, quality: number): Promise<void> {
  return new Promise((resolve, reject) => {
    let originFile = fs.openSync(originPath, fs.OpenMode.READ_ONLY);
    let originImageSource = image.createImageSource(originFile.fd);
    let decodingOptions: image.DecodingOptions = {
      desiredPixelFormat: 3,
    };
    originImageSource.createPixelMap(decodingOptions).then((pixelMap) => {
      let imagePackerApi = image.createImagePacker();
      let packOpts: image.PackingOption = {
        format: "image/webp",
        quality: quality
      };
      imagePackerApi.packing(pixelMap, packOpts).then((webpData) => {
        let file = fs.openSync(targetPath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
        fs.writeSync(file.fd, webpData);
        fs.closeSync(file);
        fs.closeSync(originFile);
        resolve();
      }).catch((err: BusinessError) => {
        console.error("convertImageToWebp error: " + err);
        reject(err);
      });
    }).catch((err: BusinessError) => {
      console.error("convertImageToWebp error: " + err);
      reject(err);
    });
  });
}

更多关于HarmonyOS鸿蒙NEXT中图片上传到阿里OSS文件体积太大，如何在手机端先转换成WebP之后再上传的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

imagePackerApi.packing(pixelMap, packOpts).then((webpData) 改成调用packToFile方法试试呢

originImageSource.createPixelMap(decodingOptions).then((pixelMap) => { let dstFile = fs.openSync(imagePath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);

let packOpts: image.PackingOption = { format: “image/webp”, quality: 98 };

await image.createImagePacker().packToFile(pixelMap, dstFile.fd, packOpts) })

更多关于HarmonyOS鸿蒙NEXT中图片上传到阿里OSS文件体积太大，如何在手机端先转换成WebP之后再上传的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙NEXT中，若需将图片上传到阿里OSS前先转换为WebP格式，可以使用鸿蒙提供的图像处理API。首先，通过Image类加载原始图片，然后使用Image.Packer将图片编码为WebP格式。以下是一个简单的代码示例：

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

async function convertToWebP(uri: string): Promise<ArrayBuffer> {
    const imageSource = await image.createImageSource(uri);
    const imagePixelMap = await imageSource.createPixelMap();
    const packer = image.createImagePacker();
    const webpData = await packer.packing(imagePixelMap, { format: 'image/webp', quality: 80 });
    return webpData;
}

在获取到WebP格式的图片数据后，可以通过阿里OSS的SDK将数据上传到OSS。确保在转换过程中设置合适的压缩质量，以平衡图片质量和文件大小。

在HarmonyOS鸿蒙NEXT中，可以通过以下步骤将图片转换为WebP格式后再上传到阿里OSS：

  1. 引入WebP库：使用第三方库如libwebp或webp-android进行图片格式转换。
  2. 图片压缩：通过BitmapFactory加载图片，使用WebPEncoder将Bitmap转换为WebP格式。
  3. 上传到OSS：使用阿里OSS SDK将转换后的WebP文件上传。

示例代码：

Bitmap bitmap = BitmapFactory.decodeFile(imagePath);
ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
bitmap.compress(Bitmap.CompressFormat.WEBP, 80, outputStream);
byte[] webpData = outputStream.toByteArray();
// 使用OSS SDK上传webpData

这样可以有效减小文件体积，提升上传效率。

回到顶部