ImageDownloadComponent.ets
4.21 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
import { abilityAccessCtrl, common, Permissions } from '@kit.AbilityKit';
import { http } from '@kit.NetworkKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { promptAction } from '@kit.ArkUI';
import { image } from '@kit.ImageKit';
import { photoAccessHelper } from '@kit.MediaLibraryKit';
import fs from '@ohos.file.fs';
const PERMISSIONS: Array<Permissions> = [
'ohos.permission.READ_MEDIA',
'ohos.permission.WRITE_MEDIA'
];
@Component
export struct ImageDownloadComponent {
@State image: PixelMap | undefined = undefined;
@State photoAccessHelper: photoAccessHelper.PhotoAccessHelper | undefined = undefined; // 相册模块管理实例
@State imageBuffer: ArrayBuffer | undefined = undefined; // 图片ArrayBuffer
url: string = ''
build() {
Column() {
Image($r('app.media.icon_arrow_left_white'))
.width(24)
.height(24)
.aspectRatio(1)
.interpolation(ImageInterpolation.High)
.rotate({ angle: -90 })
.onClick(async () => {
console.info(`cj2024 onClick ${this.imageBuffer}`)
if (this.imageBuffer !== undefined) {
await this.saveImage(this.imageBuffer);
promptAction.showToast({
message: $r('app.string.image_request_success'),
duration: 2000
})
}
})
}
}
async aboutToAppear(): Promise<void> {
console.info(`cj2024 图片下载 ${this.url}`)
const context = getContext(this) as common.UIAbilityContext;
const atManager = abilityAccessCtrl.createAtManager();
await atManager.requestPermissionsFromUser(context, PERMISSIONS);
this.getPicture();
}
/**
* 通过http的request方法从网络下载图片资源
*/
async getPicture() {
console.info(`cj2024 getPicture`)
http.createHttp()
.request(this.url,
(error: BusinessError, data: http.HttpResponse) => {
if (error) {
// 下载失败时弹窗提示检查网络,不执行后续逻辑
promptAction.showToast({
message: $r('app.string.image_request_fail'),
duration: 2000
})
return;
}
this.transcodePixelMap(data);
// 判断网络获取到的资源是否为ArrayBuffer类型
console.info(`cj2024 getPicture ${data.result}`)
if (data.result instanceof ArrayBuffer) {
console.info(`cj2024 getPicture 222`)
this.imageBuffer = data.result as ArrayBuffer;
}
}
)
}
/**
* 使用createPixelMap将ArrayBuffer类型的图片装换为PixelMap类型
* @param data:网络获取到的资源
*/
transcodePixelMap(data: http.HttpResponse) {
console.info(`cj2024 transcodePixelMap ${data.responseCode}`)
if (http.ResponseCode.OK === data.responseCode) {
const imageData: ArrayBuffer = data.result as ArrayBuffer;
// 通过ArrayBuffer创建图片源实例。
const imageSource: image.ImageSource = image.createImageSource(imageData);
const options: image.InitializationOptions = {
'alphaType': 0, // 透明度
'editable': false, // 是否可编辑
'pixelFormat': 3, // 像素格式
'scaleMode': 1, // 缩略值
'size': { height: 100, width: 100 }
}; // 创建图片大小
// 通过属性创建PixelMap
imageSource.createPixelMap(options).then((pixelMap: PixelMap) => {
this.image = pixelMap;
});
}
}
/**
* 保存ArrayBuffer到图库
* @param buffer:图片ArrayBuffer
* @returns
*/
async saveImage(buffer: ArrayBuffer | string): Promise<void> {
console.info(`cj2024 saveImage buffer ${buffer}`)
const context = getContext(this) as common.UIAbilityContext; // 获取getPhotoAccessHelper需要的context
const helper = photoAccessHelper.getPhotoAccessHelper(context); // 获取相册管理模块的实例
const uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg'); // 指定待创建的文件类型、后缀和创建选项,创建图片或视频资源
console.info(`cj2024 saveImage uri ${uri}`)
const file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
await fs.write(file.fd, buffer);
await fs.close(file.fd);
}
}