大佬们,能帮忙看看吗,我进行图片压缩后得到了一个沙箱地址,但是怎么把这个地址转成base64啊?HarmonyOS 鸿蒙Next 得到的地址是“file://cn.adbkj.app/data/storage/el2/base/haps/entry/fi” 急急急!!!
大佬们,能帮忙看看吗,我进行图片压缩后得到了一个沙箱地址,但是怎么把这个地址转成base64啊?HarmonyOS 鸿蒙Next 得到的地址是“file://cn.adbkj.app/data/storage/el2/base/haps/entry/fi” 急急急!!!
关于大佬们,能帮忙看看吗,我进行图片压缩后得到了一个沙箱地址,但是怎么把这个地址转成base64啊?HarmonyOS 鸿蒙Next 得到的地址是“file://cn.adbkj.app/data/storage/el2/base/haps/entry/fi” 急急急!!!的问题,您也可以访问:https://www.itying.com/category-93-b0.html 联系官网客服。
参考 fileChangePixelMap 方法
import fs from '@ohos.file.fs';
// xxx.ets
import {
photoAccessHelper, PhotoPickerComponent, PickerController, PickerOptions,
DataType, ItemInfo, PhotoBrowserInfo, AnimatorParams,
MaxSelected, ItemType, ClickType, PickerOrientation,
SelectMode, PickerColorMode, ReminderMode, MaxCountType
} from '@kit.MediaLibraryKit';
import { common } from '@kit.AbilityKit';
import { image } from '@kit.ImageKit';
import { buffer } from '@kit.ArkTS';
@Entry
@Component
struct Page21 {
pickerOptions: PickerOptions = new PickerOptions();
@State pickerController: PickerController = new PickerController();
@State selectUris: Array<string> = new Array<string>();
aboutToAppear() {
this.pickerOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE;
this.pickerOptions.maxSelectNumber = 10;
this.pickerOptions.isSearchSupported = false;
this.pickerOptions.isPhotoTakingSupported = false;
// 其他属性…
}
private onSelect(uri: string): void {
// 添加
if (uri) {
this.selectUris.push(uri);
}
}
private onDeselect(uri: string): void {
// 移除
if (uri) {
this.selectUris = this.selectUris.filter((item: string) => {
return item != uri;
})
}
}
private onItemClicked(itemInfo: ItemInfo, clickType: ClickType): boolean {
console.info(onItemClicked:${<span class="hljs-built_in"><span class="hljs-built_in">JSON</span></span>.stringify(itemInfo)}
)
if (!itemInfo) {
return false;
}
let type: ItemType | undefined = itemInfo.itemType;
if (type === ItemType.CAMERA) {
// 点击相机item
console.info(‘点击相机item’)
return true; // 返回true则拉起系统相机,若应用需要自行处理则返回false。
} else {
if (clickType === ClickType.SELECTED) {
// 应用做自己的业务处理
console.info(应用做自己的业务处理uri:${itemInfo.uri}
)
if(itemInfo.uri){
this.fileChangePixelMap(itemInfo.uri)
}
return true; // 返回true则勾选,否则则不响应勾选。
}
}
return true;
}
private onEnterPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo): boolean {
// 进入大图的回调
return true;
}
private onExitPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo): boolean {
// 退出大图的回调
return true;
}
private onPickerControllerReady(): void {
// 接收到该回调后,便可通过pickerController相关接口向picker发送数据,在此之前不生效。
}
@State base64:string = “”
build() {
Column() {
PhotoPickerComponent({
pickerOptions: this.pickerOptions,
// onSelect: (uri: string): void => this.onSelect(uri),
// onDeselect: (uri: string): void => this.onDeselect(uri),
onItemClicked: (itemInfo: ItemInfo, clickType: ClickType): boolean => this.onItemClicked(itemInfo, clickType), // 该接口可替代上面两个接口
onEnterPhotoBrowser: (photoBrowserInfo: PhotoBrowserInfo): boolean => this.onEnterPhotoBrowser(photoBrowserInfo),
onExitPhotoBrowser: (photoBrowserInfo: PhotoBrowserInfo): boolean => this.onExitPhotoBrowser(photoBrowserInfo),
onPickerControllerReady: (): void => this.onPickerControllerReady(),
pickerController: this.pickerController,
}).height(‘50%’).width(‘100%’)
Text(<span class="hljs-string"><span class="hljs-string">'通过base64展示当前图片'</span></span>)
Image(<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.base64).width(<span class="hljs-string"><span class="hljs-string">'300lpx'</span></span>).height(<span class="hljs-string"><span class="hljs-string">'300lpx'</span></span>)
<span class="hljs-comment"><span class="hljs-comment">// 这里模拟应用侧底部的选择栏</span></span>
Row() {
ForEach(<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.selectUris, (uri: string) => {
Image(uri).height(<span class="hljs-string"><span class="hljs-string">'10%'</span></span>).width(<span class="hljs-string"><span class="hljs-string">'10%'</span></span>).onClick(() => {
<span class="hljs-comment"><span class="hljs-comment">// 点击事件模拟删除操作,通过pickerController向picker组件发送已选择的数据列表,触发picker组件勾选框刷新</span></span>
<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.selectUris = <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.selectUris.filter((item: string) => {
<span class="hljs-keyword"><span class="hljs-keyword">return</span></span> item != uri;
})
<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.pickerController.setData(DataType.SET_SELECTED_URIS, <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.selectUris);
})
}, (uri: string) => <span class="hljs-built_in"><span class="hljs-built_in">JSON</span></span>.stringify(uri))
}
}
}
async fileChangePixelMap(path: string) {
try {
<span class="hljs-comment"><span class="hljs-comment">// 打开文件读取流</span></span>
<span class="hljs-keyword"><span class="hljs-keyword">let</span></span> file = fs.openSync(path, fs.OpenMode.READ_ONLY);
<span class="hljs-comment"><span class="hljs-comment">// 获取当前上下文</span></span>
<span class="hljs-keyword"><span class="hljs-keyword">let</span></span> context = getContext() as common.UIAbilityContext;
<span class="hljs-comment"><span class="hljs-comment">// 新建一个保存裁剪后图片的路径</span></span>
<span class="hljs-keyword"><span class="hljs-keyword">let</span></span> newPath = context.filesDir + <span class="hljs-string"><span class="hljs-string">'/test'</span></span> + <span class="hljs-keyword"><span class="hljs-keyword">new</span></span> <span class="hljs-built_in"><span class="hljs-built_in">Date</span></span>().getTime() + <span class="hljs-string"><span class="hljs-string">'.jpg'</span></span>;
<span class="hljs-comment"><span class="hljs-comment">// 复制图片到新的路径</span></span>
fs.copyFileSync(file.fd, newPath);
<span class="hljs-comment"><span class="hljs-comment">// 关闭文件读取流</span></span>
fs.closeSync(file);
<span class="hljs-comment"><span class="hljs-comment">// 创建图片源对象</span></span>
<span class="hljs-keyword"><span class="hljs-keyword">const</span></span> imageSource: image.ImageSource = image.createImageSource(newPath);
console.log(<span class="hljs-string"><span class="hljs-string">'imageSource🥳'</span></span>, <span class="hljs-string"><span class="hljs-string">'----->👉'</span></span>, <span class="hljs-built_in"><span class="hljs-built_in">JSON</span></span>.stringify(imageSource));
<span class="hljs-comment"><span class="hljs-comment">// 图片解码选项</span></span>
<span class="hljs-keyword"><span class="hljs-keyword">let</span></span> decodingOptions: image.DecodingOptions = {
editable: <span class="hljs-literal"><span class="hljs-literal">true</span></span>,
desiredPixelFormat: <span class="hljs-number"><span class="hljs-number">3</span></span>,
};
<span class="hljs-comment"><span class="hljs-comment">// 创建像素地图</span></span>
<span class="hljs-keyword"><span class="hljs-keyword">let</span></span> mPixelMap: image.PixelMap = await imageSource.createPixelMap(decodingOptions);
<span class="hljs-comment"><span class="hljs-comment">// 转换成base64</span></span>
<span class="hljs-keyword"><span class="hljs-keyword">const</span></span> imagePackerApi: image.ImagePacker = image.createImagePacker();
<span class="hljs-keyword"><span class="hljs-keyword">let</span></span> packOpts: image.PackingOption = { format: <span class="hljs-string"><span class="hljs-string">'image/jpeg'</span></span>, quality: <span class="hljs-number"><span class="hljs-number">100</span></span> };
imagePackerApi.packing(mPixelMap, packOpts).then((data: <span class="hljs-built_in"><span class="hljs-built_in">ArrayBuffer</span></span>) => {
<span class="hljs-keyword"><span class="hljs-keyword">let</span></span> buf: buffer.Buffer = buffer.from(data);
<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.base64 = <span class="hljs-string"><span class="hljs-string">'data:image/jpeg;base64,'</span></span> + buf.toString(<span class="hljs-string"><span class="hljs-string">'base64'</span></span>, <span class="hljs-number"><span class="hljs-number">0</span></span>, buf.length);
console.info(<span class="hljs-string"><span class="hljs-string">'base64: '</span></span> + <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.base64);
})
<span class="hljs-comment"><span class="hljs-comment">// 获取图片信息</span></span>
<span class="hljs-keyword"><span class="hljs-keyword">let</span></span> mImageInfo: image.ImageInfo = await mPixelMap.getImageInfo();
console.log(<span class="hljs-string"><span class="hljs-string">'mImageInfo🥳'</span></span>, <span class="hljs-string"><span class="hljs-string">'----->👉'</span></span>, <span class="hljs-built_in"><span class="hljs-built_in">JSON</span></span>.stringify(mImageInfo));
<span class="hljs-keyword"><span class="hljs-keyword">return</span></span> mPixelMap
} <span class="hljs-keyword"><span class="hljs-keyword">catch</span></span> (e) {
console.error(<span class="hljs-string"><span class="hljs-string">'imgChange🥳'</span></span>, <span class="hljs-built_in"><span class="hljs-built_in">JSON</span></span>.stringify(e));
<span class="hljs-keyword"><span class="hljs-keyword">return</span></span> <span class="hljs-literal"><span class="hljs-literal">undefined</span></span>
}
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>
字符串转base64呀