HarmonyOS 如何为沙盒内的照片生成缩略图?

沙盒内的图片,将会显示一个列表在界面上,如果全部显示原图担心性能问题,所以在存放图片时想先生成缩略图,然后在列表里面只显示压缩图。文档里面有PhotoAsset.getThumbnail这个方法,不过好像无法读取应用沙盒内的图片。

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
fox280

沙箱内的图片没有获取缩略图的api,建议可以先压缩图片,然后再显示。

图片压缩可以参考如下demo:

1.初始化图片资源到沙箱。

async aboutToAppear(): Promise<void> {
  const resourceManager = getContext(this).resourceManager
  const imageArray = await resourceManager.getMediaContent($r('app.media.100'));
  console.log("yuv_path is:" + path);
  let file = fs.openSync(path, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
  fs.write(file.fd, imageArray.buffer).then((writeLen) => {
  console.info("write data to file succeed and size is:" + writeLen);
  fs.closeSync(file);
}).catch((err: BusinessError) => {
  console.info("write data to file failed with error message: " + err.message + ", error code: " + err.code);
});
}

2.创建pixelMap,并调用压缩方法。

// path为已获得的沙箱路径
const imageSource: image.ImageSource = image.createImageSource(path);
//创建pixelMap
this.pixelMap = await imageSource.createPixelMap(decodingOptions);
console.log(this.pixelMap.getPixelBytesNumber());
//指定压缩宽、高、大小
this.packingDetail(500, 500, 100)

3.根据压缩后目标图片宽高计算缩放比并进行缩放,调用packing方法实现第一次压缩。

if (this.pixelMap) {
  Logger.info("before scaling pixelmap." + this.pixelMap.getPixelBytesNumber());
  let imageInfo = await this.pixelMap.getImageInfo();
  let a = this.pixelMap
  //计算压缩比
  let scaleX: number = targetWidth / imageInfo.size.width;
  let scaleY: number = targetHeight / imageInfo.size.height;
  this.pixelMap.scale(scaleX, scaleY, (err: BusinessError) => {
    if (err) {
      console.error("Failed to scale pixelmap.");
      return;
    } else {
      console.log("in scaling pixelmap." + a.getPixelBytesNumber());
    }
  });
}
let imagePackerApi = image.createImagePacker();
let packOpts: image.PackingOption = { format: "image/jpeg", quality: 100 };
imagePackerApi.packing(this.pixelMap, packOpts).then((data: ArrayBuffer) => {
  Logger.info("tag in 100 quality data" + data.byteLength)
  this.compressPictures(data, targetPixelSize, 99);
});

4.调用递归算法,当压缩后的data,小于等于压缩目标图片大小时将data写入本地沙箱并结束递归。

compressPictures(data?: ArrayBuffer, size?: number, quality?: number): void {
  if (data && size && quality) {
  const currentSize = data.byteLength / 1024
  if (currentSize <= size || quality === 0) {
  console.log("finally quallity is:" + ++quality)
  let file = fs.openSync(path9, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
  fs.write(file.fd, data).then(async (writeLen) => {
  console.info("write data to file succeed2 and size is:" + writeLen);
  fs.closeSync(file);
}).catch((err: BusinessError) => {
  console.info("write data to file failed1 with error message: " + err.message + ", error code: " + err.code);
});
return;
}
}
if (quality) {
  let packOpts: image.PackingOption = { format: "image/jpeg", quality: quality }
  let imagePackerApi = image.createImagePacker();
  imagePackerApi.packing(this.pixelMap, packOpts)
    .then((ret: ArrayBuffer) => {
      //递归算法,直到压缩到指定大小的data
      if (quality) {
        Logger.info("PACKING66666"+quality)
        return this.compressPictures(ret, size, quality - 1)
      }
    }).catch((err: BusinessError) => {
    console.log(`error`)
    return false
  })
}
}
分享
微博
QQ
微信
回复
1天前
相关问题
缩略图如何获取文件缩略图
750浏览 • 1回复 待解决
HarmonyOS 根据视频路径生成缩略图
78浏览 • 1回复 待解决
HarmonyOS 视频缩略图问题
18浏览 • 1回复 待解决
鸿蒙能获取图片指定大小缩略图
9620浏览 • 1回复 待解决
HarmonyOS读取视频封缩略图问题求助
659浏览 • 1回复 待解决
Image组件如何加载盒内图片
2533浏览 • 1回复 待解决
Image组件不支持读入盒内图片
914浏览 • 1回复 待解决
如何为上传请求生成Boundary?
458浏览 • 1回复 待解决