demo修改
This commit is contained in:
tsm
parent
91d29155c5
commit
6c8e873b80
|
|
@ -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) => {
|
||||
|
|
@ -67,123 +68,255 @@ struct Index {
|
|||
build() {
|
||||
Scroll(){
|
||||
Column() {
|
||||
Text('原图')
|
||||
Flex(){
|
||||
Button('png')
|
||||
.onClick(() => {
|
||||
this.transformSquare1(pngUrl);
|
||||
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(svgUrl);
|
||||
});
|
||||
Button('svg')
|
||||
.onClick(() => {
|
||||
this.transformSquare1(this.url);
|
||||
|
||||
});
|
||||
Button('bmp')
|
||||
.onClick(() => {
|
||||
this.transformSquare1(bmpUrl);
|
||||
});
|
||||
Button('bmp')
|
||||
.onClick(() => {
|
||||
this.transformSquare1(this.url);
|
||||
|
||||
});
|
||||
Button('jpp')
|
||||
.onClick(() => {
|
||||
this.transformSquare1(jpgUrl);
|
||||
});
|
||||
Button('jpp')
|
||||
.onClick(() => {
|
||||
this.transformSquare1(this.url);
|
||||
|
||||
});
|
||||
Button('gif')
|
||||
.onClick(() => {
|
||||
this.transformSquare1(gifUrl);
|
||||
});
|
||||
Button('gif')
|
||||
.onClick(() => {
|
||||
this.transformSquare1(this.url);
|
||||
|
||||
});
|
||||
Button('webp')
|
||||
.onClick(() => {
|
||||
this.transformSquare1(webpUrl);
|
||||
});
|
||||
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 })
|
||||
});
|
||||
}.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)
|
||||
}
|
||||
Text('component用法')
|
||||
}else {
|
||||
Column(){
|
||||
Text('原图')
|
||||
Flex(){
|
||||
Button('png')
|
||||
.onClick(() => {
|
||||
this.transformSquare1(pngUrl);
|
||||
|
||||
}.height(300).width('100%').backgroundColor(Color.Pink)
|
||||
Text('降采样图片')
|
||||
Flex(){
|
||||
Button('png')
|
||||
.onClick(() => {
|
||||
this.transformSquare2(pngUrl);
|
||||
this.ImageKnifeOption1 = {
|
||||
loadSrc: pngUrl,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
}
|
||||
});
|
||||
Button('svg')
|
||||
.onClick(() => {
|
||||
this.transformSquare2(svgUrl);
|
||||
this.ImageKnifeOption1 = {
|
||||
loadSrc: svgUrl,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
}
|
||||
});
|
||||
Button('svg')
|
||||
.onClick(() => {
|
||||
this.transformSquare1(svgUrl);
|
||||
|
||||
});
|
||||
Button('bmp')
|
||||
.onClick(() => {
|
||||
this.transformSquare2(bmpUrl);
|
||||
this.ImageKnifeOption1 = {
|
||||
loadSrc: bmpUrl,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
}
|
||||
});
|
||||
Button('jpp')
|
||||
.onClick(() => {
|
||||
this.transformSquare2(jpgUrl);
|
||||
this.ImageKnifeOption1 = {
|
||||
loadSrc: jpgUrl,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
}
|
||||
});
|
||||
Button('gif')
|
||||
.onClick(() => {
|
||||
this.transformSquare2(gifUrl);
|
||||
this.ImageKnifeOption1 = {
|
||||
loadSrc: gifUrl,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
}
|
||||
});
|
||||
Button('webp')
|
||||
.onClick(() => {
|
||||
this.transformSquare2(webpUrl);
|
||||
this.ImageKnifeOption1 = {
|
||||
loadSrc: webpUrl,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
}
|
||||
});
|
||||
}.margin({top:20,bottom:20})
|
||||
});
|
||||
Button('bmp')
|
||||
.onClick(() => {
|
||||
this.transformSquare1(bmpUrl);
|
||||
|
||||
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 })
|
||||
});
|
||||
Button('jpp')
|
||||
.onClick(() => {
|
||||
this.transformSquare1(jpgUrl);
|
||||
|
||||
});
|
||||
Button('gif')
|
||||
.onClick(() => {
|
||||
this.transformSquare1(gifUrl);
|
||||
|
||||
});
|
||||
Button('webp')
|
||||
.onClick(() => {
|
||||
this.transformSquare1(webpUrl);
|
||||
|
||||
});
|
||||
}.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(pngUrl);
|
||||
this.ImageKnifeOption1 = {
|
||||
loadSrc: pngUrl,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
}
|
||||
});
|
||||
Button('svg')
|
||||
.onClick(() => {
|
||||
this.transformSquare2(svgUrl);
|
||||
this.ImageKnifeOption1 = {
|
||||
loadSrc: svgUrl,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
}
|
||||
|
||||
});
|
||||
Button('bmp')
|
||||
.onClick(() => {
|
||||
this.transformSquare2(bmpUrl);
|
||||
this.ImageKnifeOption1 = {
|
||||
loadSrc: bmpUrl,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
}
|
||||
});
|
||||
Button('jpp')
|
||||
.onClick(() => {
|
||||
this.transformSquare2(jpgUrl);
|
||||
this.ImageKnifeOption1 = {
|
||||
loadSrc: jpgUrl,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
}
|
||||
});
|
||||
Button('gif')
|
||||
.onClick(() => {
|
||||
this.transformSquare2(gifUrl);
|
||||
this.ImageKnifeOption1 = {
|
||||
loadSrc: gifUrl,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
}
|
||||
});
|
||||
Button('webp')
|
||||
.onClick(() => {
|
||||
this.transformSquare2(webpUrl);
|
||||
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)
|
||||
}
|
||||
Text('component用法')
|
||||
ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption1 }).width(200).height(200)
|
||||
}.height(300).width('100%').backgroundColor(Color.Pink)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.height('100%')
|
||||
|
|
|
|||
Loading…
Reference in New Issue