ImageKnife/entry/src/main/ets/pages/testPreloadPage.ets

643 lines
23 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 {ImageKnifeComponent} from '@ohos/libraryimageknife'
import {ImageKnifeData} from '@ohos/libraryimageknife'
import {ImageKnifeOption} from '@ohos/libraryimageknife'
import {RequestOption} from '@ohos/libraryimageknife'
import {ImageKnifeGlobal } from '@ohos/libraryimageknife'
import worker from '@ohos.worker'
import { BusinessError } from '@ohos.base'
@Entry
@Component
struct TestPreloadPage {
svgUrl:string = ''
@State imageKnifeOption1: ImageKnifeOption =
{
loadSrc: $r('app.media.jpgSample'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
};
@State imageKnifeOption: ImageKnifeOption =
{
loadSrc: $r('app.media.jpgSample'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
};
@State imageKnifeOption3: ImageKnifeOption =
{
loadSrc: $r('app.media.jpgSample'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
};
@State imageKnifeOption4: ImageKnifeOption =
{
loadSrc: $r('app.media.jpgSample'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
};
@State imageKnifeOption5: ImageKnifeOption =
{
loadSrc: $r('app.media.jpgSample'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
};
@State imageKnifeOption6: ImageKnifeOption =
{
loadSrc: $r('app.media.jpgSample'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
};
build() {
Scroll() {
Column() {
Column() {
Flex({ direction: FlexDirection.Row }) {
Button('预加载本地资源gif')
.onClick(() => {
let request = new RequestOption();
request.load($r('app.media.gifSample'))
.setImageViewSize({ width: 300, height: 300 })
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
if (err) {
console.log('预加载本地资源gif 出现错误! err=' + err)
} else {
console.log('预加载本地资源gif成功! imageKnifedata=' + JSON.stringify(data))
}
return false;
}})
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
})
.margin({ left: 15 })
.backgroundColor(Color.Grey)
Button('本地资源gif')
.onClick(() => {
this.imageKnifeOption1 = {
loadSrc: $r('app.media.gifSample'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
}
})
.margin({ left: 15 })
.backgroundColor(Color.Grey)
Button('预加载本地资源gif静态')
.onClick(() => {
let request = new RequestOption();
request.load($r('app.media.gifSample'))
.setImageViewSize({ width: 300, height: 300 })
.dontAnimate()
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
if (err ) {
console.log('预加载本地资源gif静态 出现错误! err=' + err)
} else {
console.log('预加载本地资源gif静态成功! imageKnifedata=' + JSON.stringify(data))
}
return false;
}})
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
})
.margin({ left: 15 })
.backgroundColor(Color.Grey)
Button('本地资源gif静态')
.onClick(() => {
this.imageKnifeOption1 = {
loadSrc: $r('app.media.gifSample'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
dontAnimateFlag: true
}
})
.margin({ left: 15 })
.backgroundColor(Color.Grey)
}
.margin({ top: 15 })
Flex({ direction: FlexDirection.Row }) {
Button('预加载网络资源gif')
.onClick(() => {
let request = new RequestOption();
request.load('https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658')
.setImageViewSize({ width: 300, height: 300 })
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
if (err) {
console.log('预加载网络资源gif 出现错误! err=' + err)
} else {
console.log('预加载网络资源gif成功! imageKnifedata=' + JSON.stringify(data))
}
return false;
}})
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
})
.margin({ left: 15 })
.backgroundColor(Color.Grey)
Button('网络资源gif')
.onClick(() => {
this.imageKnifeOption1 = {
loadSrc: 'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658',
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
};
})
.margin({ left: 15 })
.backgroundColor(Color.Grey)
Button('预加载网络资源gif静态')
.onClick(() => {
let request = new RequestOption();
request.load('https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658')
.setImageViewSize({ width: 300, height: 300 })
.dontAnimate()
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
if (err) {
console.log('预加载网络资源gif静态 出现错误! err=' + err)
} else {
console.log('预加载网络资源gif静态成功! imageKnifedata=' + JSON.stringify(data))
}
return false;
}})
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
})
.margin({ left: 15 })
.backgroundColor(Color.Grey)
Button('网络资源gif静态')
.onClick(() => {
this.imageKnifeOption1 = {
loadSrc: 'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658',
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
dontAnimateFlag: true
};
})
.margin({ left: 15 })
.backgroundColor(Color.Grey)
}
.margin({ top: 15 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(200).height(200)
}
Column() {
Flex({ direction: FlexDirection.Row }) {
Button('预加载本地资源svg')
.onClick(() => {
let request = new RequestOption();
request.load($r('app.media.svgSample'))
.setImageViewSize({ width: 300, height: 300 })
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
if (err ) {
console.log('预加载本地资源svg 出现错误! err=' + err)
} else {
console.log('预加载本地资源svg成功! imageKnifedata=' + JSON.stringify(data))
}
return false;
}})
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
})
.margin({ left: 15 })
.backgroundColor(Color.Grey)
Button('本地资源svg')
.onClick(() => {
this.imageKnifeOption = {
loadSrc: $r('app.media.svgSample'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
}
})
.margin({ left: 15 })
.backgroundColor(Color.Grey)
}
.margin({ top: 15 })
Text("请先设置SVG图片的url地址")
TextArea({ placeholder: '请输入SVG图片的url地址' })
.placeholderColor("rgb(0,0,35)")
.placeholderFont({ size: 20, weight: 100, family: 'cursive', style: FontStyle.Italic })
.textAlign(TextAlign.Center)
.caretColor(Color.Blue)
.height(40)
.width(400)
.fontSize(20)
.fontWeight(FontWeight.Bold)
.fontFamily("sans-serif")
.fontStyle(FontStyle.Normal)
.fontColor(Color.Red)
.onChange((value: string) => {
this.svgUrl = value
})
Flex({ direction: FlexDirection.Row }) {
Button('预加载网络资源svg')
.onClick(() => {
let request = new RequestOption();
request.load(this.svgUrl)
.setImageViewSize({ width: 300, height: 300 })
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
if (err) {
console.log('预加载网络资源gif 出现错误! err=' + err)
} else {
console.log('预加载网络资源gif成功! imageKnifedata=' + JSON.stringify(data))
}
return false;
}})
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
})
.margin({ left: 15 })
.backgroundColor(Color.Grey)
Button('网络资源svg')
.onClick(() => {
this.imageKnifeOption = {
loadSrc: this.svgUrl,
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
};
})
.margin({ left: 15 })
.backgroundColor(Color.Grey)
}
.margin({ top: 15 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(200).height(200)
}
Column() {
Flex({ direction: FlexDirection.Row }) {
Button('预加载本地资源webp')
.onClick(() => {
let request = new RequestOption();
request.load($r('app.media.jpgSample'))
.setImageViewSize({ width: 300, height: 300 })
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
if (err) {
console.log('预加载本地资源webp 出现错误! err=' + err)
} else {
console.log('预加载本地资源webp成功! imageKnifedata=' + JSON.stringify(data))
}
return false;
}})
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
})
.margin({ left: 15 })
.backgroundColor(Color.Grey)
Button('本地资源webp')
.onClick(() => {
this.imageKnifeOption3 = {
loadSrc: $r('app.media.jpgSample'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
}
})
.margin({ left: 15 })
.backgroundColor(Color.Grey)
}
.margin({ top: 15 })
Flex({ direction: FlexDirection.Row }) {
Button('预加载网络资源webp')
.onClick(() => {
let request = new RequestOption();
request.load('https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp')
.setImageViewSize({ width: 300, height: 300 })
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
if (err) {
console.log('预加载网络资源webp 出现错误! err=' + err)
} else {
console.log('预加载网络资源webp成功! imageKnifedata=' + JSON.stringify(data))
}
return false;
}})
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
})
.margin({ left: 15 })
.backgroundColor(Color.Grey)
Button('网络资源webp')
.onClick(() => {
this.imageKnifeOption3 = {
loadSrc: 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
};
})
.margin({ left: 15 })
.backgroundColor(Color.Grey)
}
.margin({ top: 15 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }).width(200).height(200)
}
Column() {
Flex({ direction: FlexDirection.Row }) {
Button('预加载本地资源bmp')
.onClick(() => {
let request = new RequestOption();
request.load($r('app.media.bmpSample'))
.setImageViewSize({ width: 300, height: 300 })
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
if (err) {
console.log('预加载本地资源bmp 出现错误! err=' + err)
} else {
console.log('预加载本地资源bmp成功! imageKnifedata=' + JSON.stringify(data))
}
return false;
}})
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
})
.margin({ left: 15 })
.backgroundColor(Color.Grey)
Button('本地资源bmp')
.onClick(() => {
this.imageKnifeOption4 = {
loadSrc: $r('app.media.bmpSample'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
}
})
.margin({ left: 15 })
.backgroundColor(Color.Grey)
}
.margin({ top: 15 })
Flex({ direction: FlexDirection.Row }) {
Button('预加载网络资源bmp')
.onClick(() => {
let request = new RequestOption();
request.load('https://img-blog.csdn.net/20140514114029140')
.setImageViewSize({ width: 300, height: 300 })
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
if (err) {
console.log('预加载网络资源bmp 出现错误! err=' + err)
} else {
console.log('预加载网络资源bmp成功! imageKnifedata=' + JSON.stringify(data))
}
return false;
}})
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
})
.margin({ left: 15 })
.backgroundColor(Color.Grey)
Button('网络资源bmp')
.onClick(() => {
this.imageKnifeOption4 = {
loadSrc: 'https://img-blog.csdn.net/20140514114029140',
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
};
})
.margin({ left: 15 })
.backgroundColor(Color.Grey)
}
.margin({ top: 15 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }).width(200).height(200)
}
Column() {
Flex({ direction: FlexDirection.Row }) {
Button('预加载本地资源png')
.onClick(() => {
let request = new RequestOption();
request.load($r('app.media.pngSample'))
.setImageViewSize({ width: 300, height: 300 })
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
if (err) {
console.log('预加载本地资源png 出现错误! err=' + err)
} else {
console.log('预加载本地资源png成功! imageKnifedata=' + JSON.stringify(data))
}
return false;
}})
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
})
.margin({ left: 15 })
.backgroundColor(Color.Grey)
Button('本地资源png')
.onClick(() => {
this.imageKnifeOption5 = {
loadSrc: $r('app.media.pngSample'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
}
})
.margin({ left: 15 })
.backgroundColor(Color.Grey)
}
.margin({ top: 15 })
Flex({ direction: FlexDirection.Row }) {
Button('预加载网络资源png')
.onClick(() => {
let request = new RequestOption();
request.load('https://img-blog.csdnimg.cn/20191215043500229.png')
.setImageViewSize({ width: 300, height: 300 })
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
if (err) {
console.log('预加载网络资源bmp 出现错误! err=' + err)
} else {
console.log('预加载网络资源bmp成功! imageKnifedata=' + JSON.stringify(data))
}
return false;
}})
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
})
.margin({ left: 15 })
.backgroundColor(Color.Grey)
Button('网络资源png')
.onClick(() => {
this.imageKnifeOption5 = {
loadSrc: 'https://img-blog.csdnimg.cn/20191215043500229.png',
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
};
})
.margin({ left: 15 })
.backgroundColor(Color.Grey)
}
.margin({ top: 15 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption5 }).width(200).height(200)
}
Column() {
Flex({ direction: FlexDirection.Row }) {
Button('预加载本地资源jpg')
.onClick(() => {
let request = new RequestOption();
request.load($r('app.media.jpgSample'))
.setImageViewSize({ width: 300, height: 300 })
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
if (err) {
console.log('预加载本地资源jpg 出现错误! err=' + err)
} else {
console.log('预加载本地资源jpg成功! imageKnifedata=' + JSON.stringify(data))
}
return false;
}})
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
})
.margin({ left: 15 })
.backgroundColor(Color.Grey)
Button('本地资源jpg')
.onClick(() => {
this.imageKnifeOption6 = {
loadSrc: $r('app.media.jpgSample'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
}
})
.margin({ left: 15 })
.backgroundColor(Color.Grey)
}
.margin({ top: 15 })
Flex({ direction: FlexDirection.Row }) {
Button('预加载网络资源jpg')
.onClick(() => {
let request = new RequestOption();
request.load('https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB')
.setImageViewSize({ width: 300, height: 300 })
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
if (err) {
console.log('预加载网络资源jpg 出现错误! err=' + err)
} else {
console.log('预加载网络资源jpg成功! imageknifedata=' + JSON.stringify(data))
}
return false;
}})
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
})
.margin({ left: 15 })
.backgroundColor(Color.Grey)
Button('网络资源jpg')
.onClick(() => {
this.imageKnifeOption6 = {
loadSrc: 'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB',
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
};
})
.margin({ left: 15 })
.backgroundColor(Color.Grey)
}
.margin({ top: 15 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption6 }).width(200).height(200)
}
}
}
.width('100%')
.height('100%')
}
aboutToAppear() {
}
aboutToDisappear(){
}
}