floraachy
/
ImageKnife
mirror of https://gitee.com/openharmony-tpc/ImageKnife.git
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

demo修改

This commit is contained in:
tsm 2024-04-30 11:22:01 +08:00
parent 91d29155c5
commit 6c8e873b80
1 changed files with 241 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
entry/src/main/ets/pages/DownsamplingPage.ets
View File

@ -22,13 +22,14 @@ struct Index {
@State w:number = 0
@State BytesNumber1:number = 0
@State BytesNumber2:number = 0
@State url:string = ''
@State ImageKnifeOption1: ImageKnifeOption = {
loadSrc: $r('app.media.icon'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed')
}
transformSquare1(mUrl:Resource) {
transformSquare1(mUrl:ESObject) {
let imageKnifeOption:RequestOption = new RequestOption();
imageKnifeOption.load(mUrl)
.addListener({ callback: (err: BusinessError | string, data: ImageKnifeData) => {
@ -38,7 +39,7 @@ struct Index {
} })
ImageKnife?.call(imageKnifeOption);
}
transformSquare2(mUrl:Resource) {
transformSquare2(mUrl:ESObject) {
let imageKnifeOption:RequestOption = new RequestOption();
imageKnifeOption.load(mUrl)
.addListener({ callback: (err: BusinessError | string, data: ImageKnifeData) => {
@ -66,6 +67,135 @@ struct Index {
build() {
Scroll(){
Column() {
Row(){
Button('切换网络图片')
Text('输入网络图片url')
TextInput({ placeholder: '输入url' })
.onChange((urls)=>{
this.url =urls
})
}
if(this.url!==''){
Column(){
Text('原图')
Flex(){
Button('png')
.onClick(() => {
this.transformSquare1(this.url);
});
Button('svg')
.onClick(() => {
this.transformSquare1(this.url);
});
Button('bmp')
.onClick(() => {
this.transformSquare1(this.url);
});
Button('jpp')
.onClick(() => {
this.transformSquare1(this.url);
});
Button('gif')
.onClick(() => {
this.transformSquare1(this.url);
});
Button('webp')
.onClick(() => {
this.transformSquare1(this.url);
});
}.margin({top:20,bottom:20})
Text("原图字节大小："+this.BytesNumber1)
Column(){
if (this.mSquarePixelMap1) {
Image(this.mSquarePixelMap1 == undefined ? '' : this.mSquarePixelMap1!)
.objectFit(ImageFit.Fill)
.width(200)
.height(200)
.margin({ top: 10 })
}
Text('component用法')
}.height(300).width('100%').backgroundColor(Color.Pink)
Text('降采样图片')
Flex(){
Button('png')
.onClick(() => {
this.transformSquare2(this.url);
this.ImageKnifeOption1 = {
loadSrc: pngUrl,
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
}
});
Button('svg')
.onClick(() => {
this.transformSquare2(this.url);
this.ImageKnifeOption1 = {
loadSrc: svgUrl,
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
}
});
Button('bmp')
.onClick(() => {
this.transformSquare2(this.url);
this.ImageKnifeOption1 = {
loadSrc: bmpUrl,
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
}
});
Button('jpp')
.onClick(() => {
this.transformSquare2(this.url);
this.ImageKnifeOption1 = {
loadSrc: jpgUrl,
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
}
});
Button('gif')
.onClick(() => {
this.transformSquare2(this.url);
this.ImageKnifeOption1 = {
loadSrc: gifUrl,
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
}
});
Button('webp')
.onClick(() => {
this.transformSquare2(this.url);
this.ImageKnifeOption1 = {
loadSrc: webpUrl,
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
}
});
}.margin({top:20,bottom:20})
Text("降采样字节大小:"+this.BytesNumber2)
this.TextInputSample()
Column(){
if (this.mSquarePixelMap2) {
Image(this.mSquarePixelMap2 == undefined ? '' : this.mSquarePixelMap2!)
.objectFit(ImageFit.Fill)
.width(200)
.height(200)
.margin({ top: 10 })
}
Text('component用法')
ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption1 }).width(200).height(200)
}.height(300).width('100%').backgroundColor(Color.Pink)
}
}else {
Column(){
Text('原图')
Flex(){
@ -170,7 +300,6 @@ struct Index {
}
});
}.margin({top:20,bottom:20})
Text("降采样字节大小:"+this.BytesNumber2)
this.TextInputSample()
Column(){
@ -186,6 +315,10 @@ struct Index {
}.height(300).width('100%').backgroundColor(Color.Pink)
}
}
}
}
.height('100%')
}
}