HarmonyOS Next实战##HarmonyOS应用开发##教育
目标：显示网络图片，通过点击保存按钮，下载网络图片，并保存到本地。
前提：需要申请权限ohos.permission.INTERNET。
实现思路：
- 通过Image显示图片。
- 通过SaveButton获取操作权限。
- 通过request.downloadFile下载图片。
- 通过fileIo拷贝图片到本地。
具体实现
import {
http } from '@kit.NetworkKit';
import {
image } from '@kit.ImageKit';
import {
BusinessError, request } from '@kit.BasicServicesKit';
import {
photoAccessHelper } from '@kit.MediaLibraryKit';
import {
promptAction } from '@kit.ArkUI';
import {
fileIo, fileIo as fs, fileUri } from '@kit.CoreFileKit';
import {
common } from '@kit.AbilityKit';
@Entry
@Component
struct SaveImageDemoPage {
imgUrl:string = 'https://pic1.zhimg.com/70/v2-88fd131a2081f6880036682526e40f4b_1440w.avis?source=172ae18b&biz_tag=Post'
@State pixelMap: PixelMap | undefined = undefined;
loadImageWithUrl(url: string) {
let responseCode = http.ResponseCode;
let OutData: http.HttpResponse;
let imagePackerApi = image.createImagePacker();
let packOpts: image.PackingOption = {
format: 'image/jpeg', quality: 98 };
// 确保网络正常
http.createHttp().request(url, {
method: http.RequestMethod.GET,
connectTimeout: 60000,
readTimeout: 60000
},
async (error: BusinessError, data: http.HttpResponse) => {
if (error) {
console.error(`http request failed with. Code: ${
error.code}, message: ${
error.message}`);
} else {
OutData = data;
let code: http.ResponseCode | number = OutData.responseCode;
if (responseCode.OK === code) {
let imageData: ArrayBuffer = OutData.result as ArrayBuffer;
let imageSource: image.ImageSource = image.createImageSource(imageData);
class tmp {
height: number = 100
width: number = 100
};
let options: Record<string, number | boolean | tmp> = {
'alphaType': 0, // 透明度
'editable': false, // 是否可编辑
'pixelFormat': 3, // 像素格式
'scaleMode': 1, // 缩略值
'size': {
height: 100, width: 100 }
}; // 创建图片大小
imageSource.createPixelMap(options).then((pixelMap: PixelMap) => {
this.pixelMap = pixelMap;
this.pixelMap.getImageInfo().then((info: image.ImageInfo) => {
console.info('info.width = ' + info.size.width);
}).catch((err: BusinessError) => {
console.error('Failed ' + err);
})
imagePackerApi.packing(pixelMap, packOpts).then(async (buffer: ArrayBuffer) => {
try {
const context = getContext(this);
let helper = photoAccessHelper.getPhotoAccessHelper(context);
let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'png');
let file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
// 写入文件
await fs.write(file.fd, buffer);
promptAction.showToast({
message: '已保存至相册！' });
// 关闭文件
await fs.close(file.fd);
} catch (error) {
console.error('error is ' + JSON.stringify(error));
}
}).catch((error: BusinessError) => {
console.error('Failed to pack the image. And the error is: ' + error);
})
pixelMap.release();
})
}
}
}
)
}
build() {
Row() {
Column({
space: 10 }) {
Image(this.imgUrl)
.width('80%')
SaveButton().onClick(async (event: ClickEvent, result: SaveButtonOnClickResult) => {
if (result === SaveButtonOnClickResult.SUCCESS) {
this.loadImageWithUrl(this.imgUrl);
} else {
promptAction.showToast({
message: '设置权限失败！' });
}
})
}
.width('100%')
}
.height('100%')
.backgroundColor(0xF1F3F5)
}
/**
* 保存图片
* @param url
*/
async saveImage(imageUrl: string) {
try {
let fileNameExtension = this.getFileNameExtension(imageUrl)
fileNameExtension = (fileNameExtension == '' || fileNameExtension == 'jfif') ? 'jpg' : fileNameExtension
let context = getContext(this) as common.UIAbilityContext;
let dirPath = context.filesDir + '/article_images_preview'
let fileName = new Date().getTime().toString()
if (!fileIo.accessSync(dirPath)) {
fileIo.mkdirSync(dirPath)
}
//下载网络图片，并保存到沙箱
request.downloadFile(context, {
url: imageUrl, filePath: `${
dirPath}/${
fileName}.${
fileNameExtension}` })
.then((downloadTask) => {
downloadTask.on('complete', async () => {
try {
// 位于应用沙箱的图片uri
let srcFileUri = `${
dirPath}/${
fileName}.${
fileNameExtension}`
let srcFileUris: Array<string> = [fileUri.getUriFromPath(srcFileUri)];
let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);
// 指定待保存照片的创建选项，包括文件后缀和照片类型，标题和照片子类型可选
let photoCreationConfigs: Array<photoAccessHelper.PhotoCreationConfig> = [
{
title: fileName, // 可选
fileNameExtension: fileNameExtension,
photoType: photoAccessHelper.PhotoType.IMAGE,
subtype: photoAccessHelper.PhotoSubtype.DEFAULT, // 可选
}
];
// 基于弹窗授权的方式获取媒体库的目标uri
let desFileUris: Array<string> =
await phAccessHelper.showAssetsCreationDialog(srcFileUris, photoCreationConfigs);
if (desFileUris.length > 0) {
let desFile: fileIo.File = await fileIo.open(desFileUris[0], fileIo.OpenMode.WRITE_ONLY);
let srcFile: fileIo.File = await fileIo.open(srcFileUri, fileIo.OpenMode.READ_ONLY);
await fileIo.copyFile(srcFile.fd, desFile.fd);
fileIo.closeSync(srcFile);
fileIo.closeSync(desFile);
promptAction.showToast({
message: '已保存！' });
} else {
promptAction.showToast({
message: '保存失败！' });
}
fs.rmdir(dirPath);
} catch (error) {
promptAction.showToast({
message: '保存失败！' });
}
})
downloadTask.on('fail', (err: number) => {
//下载失败
promptAction.showToast({
message: '保存失败！' });
})
})
.catch((err: BusinessError) => {
promptAction.showToast({
message: '保存失败！' });
})
} catch (err) {
promptAction.showToast({
message: '保存失败！' });
}
}
/**
* 获取文件拓展名
* @param url
* @returns 文件扩展名，没有则返回空字符串
*/
getFileNameExtension(url: string): string {
// 查找最后一个点（.）的位置
const lastIndex = url.lastIndexOf('.');
let fileNameExtension = ''
if (lastIndex === -1 || lastIndex === url.length - 1) {
fileNameExtension = ''
} else {
// 提取从最后一个点到字符串末尾的子字符串
let subStr = url.substring(lastIndex);
// 使用正则表达式匹配文件后缀名
const extensionMatch = subStr.match(/\.([a-zA-Z0-9]+)(?:[\?#]|$)/);
// 如果匹配到后缀名，则返回（去掉点号）
fileNameExtension = extensionMatch ? extensionMatch[1].toLowerCase() : '';
}
return fileNameExtension
}
}
