321 lines
12 KiB
Plaintext
321 lines
12 KiB
Plaintext
/*
|
||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||
* you may not use this file except in compliance with the License.
|
||
* You may obtain a copy of the License at
|
||
*
|
||
* http://www.apache.org/licenses/LICENSE-2.0
|
||
*
|
||
* Unless required by applicable law or agreed to in writing, software
|
||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||
* See the License for the specific language governing permissions and
|
||
* limitations under the License.
|
||
*/
|
||
|
||
|
||
import {ImageKnifeOption} from '@ohos/imageknife'
|
||
import {RequestOption} from '@ohos/imageknife'
|
||
import {ImageKnifeData} from '@ohos/imageknife'
|
||
import {PixelMapPack} from '@ohos/imageknife'
|
||
|
||
|
||
|
||
|
||
@Entry
|
||
@Component
|
||
struct StorageTestDiskLruCache {
|
||
@Watch('watchImageKnifeOption') @State imageKnifeOption: ImageKnifeOption =
|
||
{
|
||
loadSrc: $r('app.media.jpgSample'),
|
||
size: { width: 300, height: 300 },
|
||
placeholderSrc: $r('app.media.icon_loading'),
|
||
errorholderSrc: $r('app.media.icon_failed'),
|
||
};
|
||
@State imageKnifePixelMapPack: PixelMapPack = new PixelMapPack();
|
||
@State imageKnifeResource: Resource = $r('app.media.icon_loading')
|
||
@State imageKnifeString: string = ""
|
||
@State normalPixelMap: boolean = false;
|
||
@State normalResource: boolean = true;
|
||
previousData: ImageKnifeData = null;
|
||
nowData: ImageKnifeData = null;
|
||
@State logText: string = "打印日志结果";
|
||
|
||
|
||
watchImageKnifeOption() {
|
||
this.imageKnifeExecute();
|
||
}
|
||
|
||
build() {
|
||
Scroll() {
|
||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||
Text("ImageKnife测试DiskLruCache能力")
|
||
.backgroundColor(Color.Blue)
|
||
Button("替换ImageKnife默认DiskLruCache并设置大小1M")
|
||
.onClick(() => {
|
||
DiskImageKnife.replaceDiskLruCache(1 * 1024 * 1024)
|
||
}).margin({top:15, bottom:15})
|
||
|
||
Button("替换ImageKnife默认DiskLruCache并设置大小30M")
|
||
.onClick(() => {
|
||
DiskImageKnife.replaceDiskLruCache(30 * 1024 * 1024)
|
||
}).margin({top:15, bottom:15})
|
||
|
||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||
Button("加载jpg网络图")
|
||
.onClick(() => {
|
||
this.imageKnifeOption = {
|
||
loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
|
||
size: { width: 300, height: 300 },
|
||
placeholderSrc: $r('app.media.icon_loading'),
|
||
errorholderSrc: $r('app.media.icon_failed'),
|
||
margin:{left:5,top:5,right:5,bottom:5}
|
||
};
|
||
|
||
}).margin({ top: 5, left: 10 })
|
||
Button("加载png网络图")
|
||
.onClick(() => {
|
||
this.imageKnifeOption = {
|
||
loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png",
|
||
size: { width: 300, height: 300 },
|
||
placeholderSrc: $r('app.media.icon_loading'),
|
||
errorholderSrc: $r('app.media.icon_failed'),
|
||
margin:{left:5,top:5,right:5,bottom:5}
|
||
};
|
||
}).margin({ top: 5, left: 10 })
|
||
Button("加载webp网络图")
|
||
.onClick(() => {
|
||
this.imageKnifeOption = {
|
||
loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
|
||
size: { width: 300, height: 300 },
|
||
placeholderSrc: $r('app.media.icon_loading'),
|
||
errorholderSrc: $r('app.media.icon_failed'),
|
||
margin:{left:5,top:5,right:5,bottom:5}
|
||
};
|
||
}).margin({ top: 5, left: 10 })
|
||
Button("加载bmp网络图")
|
||
.onClick(() => {
|
||
this.imageKnifeOption = {
|
||
loadSrc: "https://img-blog.csdn.net/20140514114029140",
|
||
size: { width: 300, height: 300 },
|
||
placeholderSrc: $r('app.media.icon_loading'),
|
||
errorholderSrc: $r('app.media.icon_failed'),
|
||
margin:{left:5,top:5,right:5,bottom:5}
|
||
};
|
||
}).margin({ top: 5, left: 10 })
|
||
}.width('100%')
|
||
.height(60).backgroundColor(Color.Pink)
|
||
|
||
|
||
Image(this.normalPixelMap ? this.imageKnifePixelMapPack.pixelMap : (this.normalResource ? this.imageKnifeResource : this.imageKnifeString))
|
||
.width(this.imageKnifeOption.size ? this.imageKnifeOption.size.width : '100%')
|
||
.height(this.imageKnifeOption.size ? this.imageKnifeOption.size.height : '100%')
|
||
.objectFit(this.imageKnifeOption.imageFit ? this.imageKnifeOption.imageFit : ImageFit.Fill)
|
||
.backgroundColor(this.imageKnifeOption.backgroundColor ? this.imageKnifeOption.backgroundColor : Color.White)
|
||
.margin(this.imageKnifeOption.margin ? this.imageKnifeOption.margin : { left: 0, top: 0, right: 0, bottom: 0 })
|
||
|
||
|
||
|
||
Scroll() {
|
||
Text(this.logText).fontSize(15)
|
||
}.width(300).height(300).margin({top:20}).backgroundColor(Color.Pink)
|
||
|
||
|
||
}
|
||
}
|
||
.width('100%')
|
||
.height('100%')
|
||
}
|
||
|
||
|
||
// imageKnife 第一次启动和数据刷新后重新发送请求
|
||
imageKnifeExecute() {
|
||
let request = new RequestOption();
|
||
request.load(this.imageKnifeOption.loadSrc)
|
||
.addListener((err, data) => {
|
||
this.imageKnifeChangeSource(data)
|
||
return false;
|
||
})
|
||
if (this.imageKnifeOption.placeholderSrc) {
|
||
request.placeholder(this.imageKnifeOption.placeholderSrc, (data) => {
|
||
this.imageKnifeChangeSource(data)
|
||
})
|
||
}
|
||
if (this.imageKnifeOption.errorholderSrc) {
|
||
request.errorholder(this.imageKnifeOption.errorholderSrc, (data) => {
|
||
this.imageKnifeChangeSource(data)
|
||
})
|
||
}
|
||
|
||
if (this.imageKnifeOption.size) {
|
||
request.setImageViewSize(this.imageKnifeOption.size)
|
||
}
|
||
|
||
if (this.imageKnifeOption.onlyRetrieveFromCache) {
|
||
request.retrieveDataFromCache(this.imageKnifeOption.onlyRetrieveFromCache)
|
||
}
|
||
|
||
if (this.imageKnifeOption.isCacheable) {
|
||
request.skipMemoryCache(!this.imageKnifeOption.isCacheable)
|
||
}
|
||
|
||
if (this.imageKnifeOption.strategy) {
|
||
request.diskCacheStrategy(this.imageKnifeOption.strategy)
|
||
}
|
||
|
||
if (this.imageKnifeOption.dontAnimateFlag) {
|
||
request.dontAnimate()
|
||
}
|
||
if (this.imageKnifeOption.allCacheInfoCallback) {
|
||
request.addAllCacheInfoCallback(this.imageKnifeOption.allCacheInfoCallback)
|
||
}
|
||
|
||
DiskImageKnife.call(request);
|
||
}
|
||
|
||
imageKnifeChangeSource(data:ImageKnifeData) {
|
||
this.imageKnifeSpecialFixed(data);
|
||
|
||
//查看mImageKnife中的DiskLruCache
|
||
let disk = DiskImageKnife.getDiskMemoryCache();
|
||
let showDisk = ''
|
||
disk.foreachDiskLruCache((value, key, map) => {
|
||
showDisk += "key=" + key + "&value=" + value;
|
||
})
|
||
this.logText = "日志结果:" + showDisk;
|
||
}
|
||
|
||
imageKnifeSpecialFixed(data:ImageKnifeData) {
|
||
if (this.nowData) {
|
||
this.previousData = this.nowData;
|
||
this.nowData = data;
|
||
if (data.isPixelMap()) {
|
||
// PixelMap
|
||
console.log("ImageKnife占位图输出=PixelMap")
|
||
if (this.previousData.isSvg()) {
|
||
console.log("ImageKnife占位图输出=PixelMap 上一个是SVG")
|
||
this.normalPixelMap = true;
|
||
this.normalResource = true;
|
||
|
||
let pixelMapPack1 = new PixelMapPack();
|
||
|
||
this.imageKnifePixelMapPack = pixelMapPack1;
|
||
|
||
setTimeout(() => {
|
||
let pixelMapPack2 = new PixelMapPack();
|
||
pixelMapPack2.pixelMap = data.imageKnifeValue as PixelMap;
|
||
this.imageKnifePixelMapPack = pixelMapPack2;
|
||
}, 100)
|
||
} else {
|
||
this.normalPixelMap = true;
|
||
this.normalResource = true;
|
||
|
||
let pixelMapPack3 = new PixelMapPack();
|
||
pixelMapPack3.pixelMap = data.imageKnifeValue as PixelMap;
|
||
|
||
this.imageKnifePixelMapPack = pixelMapPack3;
|
||
}
|
||
}
|
||
else if (data.isString()) {
|
||
// String
|
||
console.log("imageKnifevalue=" + JSON.stringify(data));
|
||
console.log("ImageKnife占位图输出=String")
|
||
if (this.previousData.isSvg()) {
|
||
|
||
console.log("data.imageKnifeValue=" + JSON.stringify(data.imageKnifeValue))
|
||
console.log("ImageKnife占位图输出=String 拥有上一个图片类型 上一个是SVG")
|
||
this.normalPixelMap = false;
|
||
this.normalResource = false;
|
||
let firstIndex = (data.imageKnifeValue as string).indexOf(DiskImageKnife.getSvgAndGifFolder());
|
||
console.log("firstIndex=" + firstIndex);
|
||
let suffix = (data.imageKnifeValue as string).substring(firstIndex, (data.imageKnifeValue as string).length)
|
||
console.log("suffix =" + suffix);
|
||
let imageKnifeNeedStr = 'internal://app/' + suffix;
|
||
this.imageKnifeString = imageKnifeNeedStr;
|
||
} else {
|
||
console.log("data.imageKnifeValue=" + JSON.stringify(data.imageKnifeValue))
|
||
console.log("ImageKnife占位图输出=String 拥有上一个图片类型 上一个不是SVG")
|
||
|
||
this.normalPixelMap = false;
|
||
this.normalResource = false;
|
||
let firstIndex = (data.imageKnifeValue as string).indexOf(DiskImageKnife.getSvgAndGifFolder());
|
||
console.log("firstIndex=" + firstIndex);
|
||
let suffix = (data.imageKnifeValue as string).substring(firstIndex, (data.imageKnifeValue as string).length)
|
||
console.log("suffix =" + suffix);
|
||
let imageKnifeNeedStr = 'internal://app/' + suffix;
|
||
this.imageKnifeString = imageKnifeNeedStr;
|
||
}
|
||
} else if (data.isResource()) {
|
||
console.log("ImageKnife占位图输出=Resource")
|
||
if (this.previousData.isSvg()) {
|
||
console.log("ImageKnife占位图输出=Resource 上一个是SVG")
|
||
this.normalPixelMap = false;
|
||
this.normalResource = true;
|
||
this.imageKnifeResource = data.imageKnifeValue as Resource;
|
||
} else {
|
||
this.normalPixelMap = false;
|
||
this.normalResource = true;
|
||
this.imageKnifeResource = data.imageKnifeValue as Resource;
|
||
}
|
||
} else {
|
||
console.log("ImageKnife占位图输出=数据错误")
|
||
}
|
||
|
||
} else {
|
||
this.nowData = data;
|
||
if (data.isPixelMap()) {
|
||
// PixelMap
|
||
console.log("ImageKnife占位图输出=PixelMap")
|
||
this.normalPixelMap = true;
|
||
this.normalResource = true;
|
||
|
||
let pixelMapPack4 = new PixelMapPack();
|
||
pixelMapPack4.pixelMap = data.imageKnifeValue as PixelMap;
|
||
|
||
this.imageKnifePixelMapPack = pixelMapPack4;
|
||
}
|
||
else if (data.isString()) {
|
||
// String
|
||
console.log("data.imageKnifeValue=" + JSON.stringify(data.imageKnifeValue))
|
||
console.log("ImageKnife占位图输出=String 没有上一个图片类型")
|
||
this.normalPixelMap = false;
|
||
this.normalResource = false;
|
||
let firstIndex = (data.imageKnifeValue as string).indexOf(DiskImageKnife.getSvgAndGifFolder());
|
||
console.log("firstIndex=" + firstIndex);
|
||
let suffix = (data.imageKnifeValue as string).substring(firstIndex, (data.imageKnifeValue as string).length)
|
||
console.log("suffix =" + suffix);
|
||
let imageKnifeNeedStr = 'internal://app/' + suffix;
|
||
this.imageKnifeString = imageKnifeNeedStr;
|
||
} else if (data.isResource()) {
|
||
console.log("ImageKnife占位图输出=Resource")
|
||
this.normalPixelMap = false;
|
||
this.normalResource = true;
|
||
this.imageKnifeResource = data.imageKnifeValue as Resource;
|
||
} else {
|
||
console.log("ImageKnife占位图输出=数据错误")
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
//函数在自定义组件析构消耗之前执行。
|
||
//不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。
|
||
aboutToDisappear() {
|
||
|
||
}
|
||
//当此页面显示时触发一次。包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。
|
||
onPageShow() {
|
||
}
|
||
//当此页面消失时触发一次。包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。
|
||
onPageHide() {
|
||
}
|
||
|
||
// 当用户点击返回按钮时触发，，仅@Entry修饰的自定义组件生效。
|
||
//返回true表示页面自己处理返回逻辑, 不进行页面路由。
|
||
//返回false表示使用默认的返回逻辑。
|
||
//不返回值会作为false处理。
|
||
onBackPress() {
|
||
|
||
}
|
||
}
|
||
var DiskImageKnife = globalThis.exports.default.data.imageKnife |