HarmonyOS 鸿蒙Next中选择系统相册里的图片并转base64
HarmonyOS 鸿蒙Next中选择系统相册里的图片并转base64
getPhotoAssets(): Promise<SelectedImageResult> {
let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
PhotoSelectOptions.maxSelectNumber = 1;
let photoPicker = new photoAccessHelper.PhotoViewPicker();
let p: Promise<SelectedImageResult> = new Promise((resolve,reject) => {
photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult: photoAccessHelper.PhotoSelectResult) => {
let url = PhotoSelectResult.photoUris[0];
this.uriToBase64(url,(imagedata:string)=>{
let result: SelectedImageResult = {
code: 0,
msg: 'success',
data: imagedata
}
resolve(result);
});
}).catch(() => {
let result: SelectedImageResult = {
code: -1,
msg: 'failure',
data: ''
}
reject(result);
});
});
return p;
}
uriToBase64(uri:string,callback:(url:string)=>void){
let file = fileIo.openSync(uri, fileIo.OpenMode.READ_ONLY);
let rebuffer = new ArrayBuffer(4096*10);
let descValue = new Uint8Array(rebuffer);
fileIo.readSync(file.fd, rebuffer);
let base64Helper = new util.Base64Helper();
base64Helper.encodeToString(descValue, util.Type.MIME).then((val) => {
let result = "data:image/png;base64,"+val;
callback(result);
})
}
选择系统相册后,将uri转成base64,不过转的base64用image控件无法展示出来
更多关于HarmonyOS 鸿蒙Next中选择系统相册里的图片并转base64的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
可以参考这个从图库选择图片上传案例:
import { BusinessError } from '@ohos.base';
import { rcp } from '@kit.RemoteCommunicationKit';
import { picker } from '@kit.CoreFileKit';
import fs from '@ohos.file.fs';
import { http } from '@kit.NetworkKit';
let uploadUrl: string = '';
function example01(): string {
let uri = '';
let photoViewPicker = new picker.PhotoViewPicker();
let photoSelectOption = new picker.PhotoSelectOptions();
photoSelectOption.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
photoViewPicker.select(photoSelectOption).then((photoSelectResult) => {
console.log("fyh photoSelectResult:" + photoSelectResult);
uri = photoSelectResult.photoUris[0];
console.log("fyh uri:" + uri);
try {
let resultPhoto = fs.openSync(uri, fs.OpenMode.READ_ONLY);
let resultName = resultPhoto.name;
let fileTemp = fs.openSync(getContext().filesDir + resultPhoto.name, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
let imageUri = fileTemp.path;
fs.copyFileSync(resultPhoto.fd, fileTemp.fd);
fs.closeSync(resultPhoto);
fs.closeSync(fileTemp);
const httpRequest = http.createHttp();
httpRequest.request(uploadUrl, {
method: http.RequestMethod.POST,
header: {
'Content-Type': 'multipart/form-data',
'Connection': 'keep-alive'
},
expectDataType: http.HttpDataType.ARRAY_BUFFER,
multiFormDataList: [
{
name: 'file',
contentType: 'image/jpg',
filePath: imageUri,
remoteFileName: 'file.jpg'
},
],
}, (err, data) => {
console.log('fyh:上传结束')
httpRequest.destroy();
}
)
} catch (err) {
console.error(`fyh:Failed to request the upload. err: ${JSON.stringify(err)}`);
}
}).catch((err: BusinessError) => {
console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
})
return uri;
}
function testRcpMultiPartUpload() {
example01();
}
function clickget() {
const session = rcp.createSession();
session.get("").then((response) => {
console.log("fyh" + JSON.stringify(response));
}).catch((err: BusinessError) => {
console.error("err:" + JSON.stringify(err));
});
}
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
testRcpMultiPartUpload();
})
Text('getText')
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
clickget();
})
}
.width('100%')
}
.height('100%')
}
}
参考如下demo:
import photoAccessHelper from '@ohos.file.photoAccessHelper';
import image from '@ohos.multimedia.image';
import fs from '@ohos.file.fs';
import { buffer } from '@kit.ArkTS';
@Entry
@Component
struct Page2 {
@State resultBase64Str: string = '';
@State getAlbum: string = '显示相册中的图片';
@State pixel: image.PixelMap | undefined = undefined;
@State albumPath: string = '';
@State photoSize: number = 0;
async getPictureFromAlbum() {
// 拉起相册,选择图片
let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
PhotoSelectOptions.maxSelectNumber = 1;
let photoPicker = new photoAccessHelper.PhotoViewPicker();
let photoSelectResult: photoAccessHelper.PhotoSelectResult = await photoPicker.select(PhotoSelectOptions);
this.albumPath = photoSelectResult.photoUris[0];
console.info('albumPath: ' + this.albumPath)
// 读取图片为buffer
const file = fs.openSync(this.albumPath, fs.OpenMode.READ_WRITE);
this.photoSize = fs.statSync(file.fd).size;
console.info('Photo Size: ' + this.photoSize);
let buffer1 = new ArrayBuffer(this.photoSize);
fs.readSync(file.fd, buffer1);
let base64Str: string = buffer.from(buffer1).toString('base64')
let resultBase64Str = "data:image/png;base64," + base64Str
this.resultBase64Str = resultBase64Str
fs.closeSync(file);
// 解码成PixelMap
const imageSource = image.createImageSource(buffer1);
console.log('imageSource: ' + JSON.stringify(imageSource));
this.pixel = await imageSource.createPixelMap({});
}
build() {
Scroll() {
Column() {
Text('获取图片')
.onClick(async () => {
await this.getPictureFromAlbum()
})
// Image(this.pixel)
Image(this.resultBase64Str).width(40).height(40)
Text(this.resultBase64Str)
}
}
}
}
更多关于HarmonyOS 鸿蒙Next中选择系统相册里的图片并转base64的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS(鸿蒙Next)中,选择系统相册里的图片并将其转换为Base64编码,可以通过以下步骤实现:
-
选择图片:使用鸿蒙的
@ohos.file.picker
模块中的PhotoViewPicker
类来选择系统相册中的图片。PhotoViewPicker
提供了select
方法,可以打开系统相册并选择图片。 -
获取图片URI:
select
方法返回一个PhotoSelectResult
对象,其中包含所选图片的URI。通过这个URI,可以访问图片文件。 -
读取图片数据:使用
@ohos.file.fs
模块中的fs.readFile
方法读取图片文件的数据。fs.readFile
方法接收图片URI,并返回一个ArrayBuffer
对象,表示图片的二进制数据。 -
转换为Base64:将
ArrayBuffer
对象转换为Base64编码。可以使用@ohos.util.base64
模块中的encodeToString
方法,将二进制数据转换为Base64字符串。
以下是示例代码:
import picker from '@ohos.file.picker';
import fs from '@ohos.file.fs';
import base64 from '@ohos.util.base64';
async function pickAndConvertImageToBase64() {
const photoPicker = new picker.PhotoViewPicker();
const photoSelectOptions = new picker.PhotoSelectOptions();
photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
photoSelectOptions.maxSelectNumber = 1;
const photoSelectResult = await photoPicker.select(photoSelectOptions);
const uri = photoSelectResult.photoUris[0];
const file = fs.openSync(uri, fs.OpenMode.READ_ONLY);
const buffer = new ArrayBuffer(fs.statSync(uri).size);
fs.readSync(file.fd, buffer);
const base64String = base64.encodeToString(buffer);
console.log(base64String);
fs.closeSync(file);
}
这段代码展示了如何从系统相册中选择一张图片,读取其二进制数据,并将其转换为Base64编码。
在HarmonyOS(鸿蒙Next)中,选择系统相册图片并转换为Base64的步骤如下:
- 调用系统相册:通过
Intent
启动系统相册应用,允许用户选择图片。 - 获取图片URI:在
onActivityResult
中获取用户选择的图片URI。 - 读取图片数据:使用
ContentResolver
打开输入流,读取图片数据。 - 转换为Base64:将读取的字节数组通过
Base64
编码转换为Base64字符串。
Intent intent = new Intent(Intent.ACTION_PICK, MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
startActivityForResult(intent, REQUEST_CODE_IMAGE);
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (requestCode == REQUEST_CODE_IMAGE && resultCode == RESULT_OK && data != null) {
Uri uri = data.getData();
try {
InputStream inputStream = getContentResolver().openInputStream(uri);
byte[] bytes = new byte[inputStream.available()];
inputStream.read(bytes);
String base64 = Base64.encodeToString(bytes, Base64.DEFAULT);
} catch (IOException e) {
e.printStackTrace();
}
}
}
此代码片段展示了如何选择图片并将其转换为Base64字符串。