野外泛在线考核系统（十四）

三、电脑端+平板

接（十三），继续完善相关功能。有这样一个需求，就是平板需要从服务端下载学生照片，便于老师评分时候查看（而老师查看时已经离线，需要从本地查看学生照片），需要两个步骤，一是从服务端下载照片，二是在本地显示照片。

（三）平板下载图片离线显示

1. 下载图片主要需要用到request.downloadFile9+，参考官方示例，主要是需要设置url 和 filePath，在FileUtil.ets中新建一个fileDownload函数
   

export function fileDownload(context: Context, fileUrl: string, fPath: string): Promise<ResponseResult> {
  return new Promise((resolve: Function, reject: Function) => {

    let downloadTask;
    try {
      request.downloadFile(context, { url: fileUrl,filePath:fPath}).then((data) => {
        // request.downloadFile(context, { url: fileUrl,filePath:`${context.tempDir}/PHOTO6.png`}).then((data) => {
        downloadTask = data;
        let completeCallback = () => {
          console.error('Download task completed.');
        };
        downloadTask.on('complete', completeCallback);
        let pauseCallback = () => {
          console.error('Download task pause.');
        };
        downloadTask.on('pause', pauseCallback);
        let removeCallback = () => {
          console.error('Download task remove.');
        };
        downloadTask.on('remove', removeCallback);
        resolve(downloadTask)
        downloadTask.getTaskInfo().then((downloadInfo) => {
          console.error('Download task queried. Data:' + JSON.stringify(downloadInfo))
        }) .catch((err) => {
          console.error('Failed to query the download task. Cause:' + err)
        });

      }).catch((err) => {
        console.error('Failed to request the download. Cause: ' + JSON.stringify(err));
        promptAction.showToast({
          message: '请求失败',
          duration: Const.ANIMATION_DURATION
        });
        reject(downloadTask)
      })
    } catch (err) {
      console.error('err.code : ' + err.code + ', err.message : ' + err.message);
      showToast(err.message);
    }

  })
}

2. 而后在Download.ets中引用，并显示
   

代码一看就懂了，fileUrl 是图片下载地址，filePath 是图片下载后存放地址（注意包括文件名）。主要参考了应用文件目录与应用文件路径，应用的路径需要通过应用上下文Context才能获取，与传统的路径方式不一样，在文件管理器里是看不到的

/*
*作者：Nowshow
*日期：
*描述：
*/
import promptAction from '@ohos.promptAction';
import image from '@ohos.multimedia.image';
import { fileDownload } from '../common/utils/FileUtil';
@Component
export default struct Download {
  @State message:string = '下载图片'
  @State fileUrl: string = 'http://192.168.2.220:8000/media/photo/student/2023/12/29/duck.jpg'
  @State filePath:string = `${getContext(this).filesDir}/duck.jpg`
  @State image: PixelMap = undefined;
  showImage(){
    let options = {
      alphaType: 0,                     // 透明度
      editable: false,                  // 是否可编辑
      pixelFormat: 3,                   // 像素格式
      scaleMode: 1,                     // 缩略值
      size: { height: 100, width: 100}
    }  // 创建图片大小
    let imageSource = image.createImageSource(this.filePath);
    imageSource.createPixelMap(options).then((pixelMap) => {
      this.image = pixelMap
    })
  }
  download(){
    fileDownload(getContext(this), this.fileUrl, this.filePath)
  }

  build(){
    Column(){
      Image('http://192.168.2.220:8000/media/photo/student/2023/12/29/cat.jpeg')
        .width('20%')
        .height('20%')
      Button('下载图片')
        .fontSize(80)
        .onClick(() => {
        console.info(this.message = '去注册')
        this.download()
      })
      Text(this.filePath).fontSize(30)
      Button("获取网络图片")
        .onClick(() => {
          this.showImage()
        })
      Image(this.image).height(150).width(200)
    }
    .height('100%').justifyContent(FlexAlign.Center)
  }
}

3. 图片显示，主要是要生成一个图片PixelMap，而后显示出来，先通过filePath 生成一个imageSource，进而创建一个pixMap，用来显示。这部分主要参考了图片解码，以及图片开发概述，从官方的文档及示例中，可以得知：要显示图片，第一步要获取图片，我是通过下载，并将其保存到filesDir中，第二步，通过文件路径创建imageSource，第三步，通过imageSource创建pixelMap，第四步，用Image组件显示pixelMap。这里options的参数设置可参考@ohos.multimedia.image (图片处理)中的image.createPixelMap8+ 中options的设置

showImage(){
    let options = {
      alphaType: 0,                     // 透明度
      editable: false,                  // 是否可编辑
      pixelFormat: 3,                   // 像素格式
      scaleMode: 1,                     // 缩略值
      size: { height: 800, width: 800}
    }  // 创建图片大小
    let imageSource = image.createImageSource(this.filePath);
    imageSource.createPixelMap(options).then((pixelMap) => {
      this.image = pixelMap
    })
  }

4. 紧接着用Image组件显示出来，主要参考了显示图片（Image）显示网络图片的例子，示例中是显示实时下载的，而我显示的是之前下载的，因此，我的图片放在了context.filesDir中，

 Button("获取网络图片")
        .onClick(() => {
          this.showImage()
        })
      Image(this.image).height(150).width(200)

5. 这个问题又折腾了两天，怪了，有时候，一天就是难以解决一个问题。