forked from floraachy/ImageKnife
367 lines
12 KiB
Plaintext
367 lines
12 KiB
Plaintext
/*
|
|
* Copyright (C) 2024 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 {
|
|
FitCenter,
|
|
ImageKnifeComponent,
|
|
ImageKnifeData,
|
|
ImageKnifeGlobal,
|
|
ImageKnifeOption,
|
|
RequestOption
|
|
} from '@ohos/libraryimageknife'
|
|
import { BusinessError } from '@ohos.base'
|
|
import { fitter, sampleNone } from '@ohos/imageknife';
|
|
|
|
let pngUrl = $r('app.media.pngSample');
|
|
let jpgUrl = $r('app.media.jpgSample');
|
|
let svgUrl = $r('app.media.svgSample');
|
|
let gifUrl = $r('app.media.gifSample');
|
|
let bmpUrl = $r('app.media.bmpSample');
|
|
let webpUrl = $r('app.media.webpSample');
|
|
let imageKnife = ImageKnifeGlobal.getInstance().getImageKnife();
|
|
|
|
@Entry
|
|
@Component
|
|
struct Index {
|
|
@State originalMSquarePixelMap?: PixelMap = undefined;
|
|
@State mSquarePixelMap?: PixelMap = undefined;
|
|
@State h: number = 0
|
|
@State w: number = 0
|
|
@State originalBytesNumber: number = 0
|
|
@State bytesNumber: number = 0
|
|
@State url: string = ''
|
|
@State network: Boolean = false
|
|
@State imageKnifeOption: ImageKnifeOption = {
|
|
loadSrc: $r('app.media.icon'),
|
|
placeholderSrc: $r('app.media.icon_loading'),
|
|
errorholderSrc: $r('app.media.icon_failed')
|
|
}
|
|
|
|
transformSquare1(mUrl: string|Resource|PixelMap) {
|
|
let imageKnifeOption: RequestOption = new RequestOption();
|
|
imageKnifeOption.load(mUrl)
|
|
.addListener({
|
|
callback: (err: BusinessError | string, data: ImageKnifeData) => {
|
|
this.originalMSquarePixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
|
|
this.originalBytesNumber = (data.drawPixelMap?.imagePixelMap as PixelMap).getPixelBytesNumber()
|
|
return false;
|
|
}
|
|
})
|
|
imageKnife?.call(imageKnifeOption);
|
|
}
|
|
|
|
transformSquare2(mUrl: string|Resource|PixelMap) {
|
|
let imageKnifeOption: RequestOption = new RequestOption();
|
|
let a = new fitter()
|
|
imageKnifeOption.load(mUrl)
|
|
.addListener({
|
|
callback: (err: BusinessError | string, data: ImageKnifeData) => {
|
|
this.mSquarePixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
|
|
this.bytesNumber = (data.drawPixelMap?.imagePixelMap as PixelMap).getPixelBytesNumber()
|
|
return false;
|
|
}
|
|
})
|
|
.setImageViewSize({ width: this.w, height: this.h })
|
|
.downsampleOf(a)
|
|
imageKnife?.call(imageKnifeOption);
|
|
}
|
|
|
|
@Builder
|
|
TextInputSample() {
|
|
Flex() {
|
|
TextInput({ placeholder: '输入宽' })
|
|
.onChange((enterKeyType) => {
|
|
this.w = Number(enterKeyType)
|
|
})
|
|
TextInput({ placeholder: '输入高' })
|
|
.onChange((enterKeyType) => {
|
|
this.h = Number(enterKeyType)
|
|
})
|
|
}.padding(20)
|
|
}
|
|
|
|
build() {
|
|
Scroll() {
|
|
Column() {
|
|
Row() {
|
|
Button('切换网络图片')
|
|
.onClick(() => {
|
|
this.network = !this.network
|
|
})
|
|
Text('输入网络图片url')
|
|
TextInput({ placeholder: '输入url' })
|
|
.onChange((urls) => {
|
|
this.url = urls
|
|
})
|
|
}
|
|
|
|
if (this.network) {
|
|
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('jpg')
|
|
.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.originalBytesNumber)
|
|
Column() {
|
|
if (this.originalMSquarePixelMap) {
|
|
Image(this.originalMSquarePixelMap == undefined ? '' : this.originalMSquarePixelMap!)
|
|
.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.imageKnifeOption = {
|
|
loadSrc: pngUrl,
|
|
placeholderSrc: $r('app.media.icon_loading'),
|
|
errorholderSrc: $r('app.media.icon_failed'),
|
|
downsampling: new fitter()
|
|
}
|
|
});
|
|
Button('svg')
|
|
.onClick(() => {
|
|
this.transformSquare2(this.url);
|
|
this.imageKnifeOption = {
|
|
loadSrc: svgUrl,
|
|
placeholderSrc: $r('app.media.icon_loading'),
|
|
errorholderSrc: $r('app.media.icon_failed'),
|
|
downsampling: new fitter()
|
|
}
|
|
|
|
});
|
|
Button('bmp')
|
|
.onClick(() => {
|
|
this.transformSquare2(this.url);
|
|
this.imageKnifeOption = {
|
|
loadSrc: bmpUrl,
|
|
placeholderSrc: $r('app.media.icon_loading'),
|
|
errorholderSrc: $r('app.media.icon_failed'),
|
|
downsampling: new fitter()
|
|
}
|
|
});
|
|
Button('jpg')
|
|
.onClick(() => {
|
|
this.transformSquare2(this.url);
|
|
this.imageKnifeOption = {
|
|
loadSrc: jpgUrl,
|
|
placeholderSrc: $r('app.media.icon_loading'),
|
|
errorholderSrc: $r('app.media.icon_failed'),
|
|
downsampling: new fitter()
|
|
}
|
|
});
|
|
// Button('gif')
|
|
// .onClick(() => {
|
|
// // this.transformSquare2(this.url);
|
|
// this.imageKnifeOption = {
|
|
// loadSrc: gifUrl,
|
|
// placeholderSrc: $r('app.media.icon_loading'),
|
|
// errorholderSrc: $r('app.media.icon_failed'),
|
|
// downsampling: new fitter()
|
|
// }
|
|
// });
|
|
// Button('webp')
|
|
// .onClick(() => {
|
|
// // this.transformSquare2(this.url);
|
|
// this.imageKnifeOption = {
|
|
// loadSrc: webpUrl,
|
|
// placeholderSrc: $r('app.media.icon_loading'),
|
|
// errorholderSrc: $r('app.media.icon_failed'),
|
|
// downsampling: new fitter()
|
|
// }
|
|
// });
|
|
}.margin({ top: 20, bottom: 20 })
|
|
|
|
Text("降采样字节大小:" + this.bytesNumber)
|
|
this.TextInputSample()
|
|
Column() {
|
|
if (this.mSquarePixelMap) {
|
|
Image(this.mSquarePixelMap == undefined ? '' : this.mSquarePixelMap!)
|
|
.objectFit(ImageFit.Fill)
|
|
.width(200)
|
|
.height(200)
|
|
.margin({ top: 10 })
|
|
}
|
|
Text('component用法')
|
|
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(200).height(200)
|
|
}.height(300).width('100%').backgroundColor(Color.Pink)
|
|
}.backgroundColor(Color.Orange)
|
|
} else {
|
|
Column() {
|
|
Text('原图')
|
|
Flex() {
|
|
Button('png')
|
|
.onClick(() => {
|
|
this.transformSquare1(pngUrl);
|
|
|
|
});
|
|
Button('svg')
|
|
.onClick(() => {
|
|
this.transformSquare1(svgUrl);
|
|
|
|
});
|
|
Button('bmp')
|
|
.onClick(() => {
|
|
this.transformSquare1(bmpUrl);
|
|
|
|
});
|
|
Button('jpg')
|
|
.onClick(() => {
|
|
this.transformSquare1(jpgUrl);
|
|
|
|
});
|
|
// Button('gif')
|
|
// .onClick(() => {
|
|
// this.transformSquare1(gifUrl);
|
|
//
|
|
// });
|
|
// Button('webp')
|
|
// .onClick(() => {
|
|
// this.transformSquare1(webpUrl);
|
|
//
|
|
// });
|
|
}.margin({ top: 20, bottom: 20 })
|
|
|
|
Text("原图字节大小：" + this.originalBytesNumber)
|
|
Column() {
|
|
if (this.originalMSquarePixelMap) {
|
|
Image(this.originalMSquarePixelMap == undefined ? '' : this.originalMSquarePixelMap!)
|
|
.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.imageKnifeOption = {
|
|
loadSrc: pngUrl,
|
|
placeholderSrc: $r('app.media.icon_loading'),
|
|
errorholderSrc: $r('app.media.icon_failed'),
|
|
}
|
|
});
|
|
Button('svg')
|
|
.onClick(() => {
|
|
this.transformSquare2(svgUrl);
|
|
this.imageKnifeOption = {
|
|
loadSrc: svgUrl,
|
|
placeholderSrc: $r('app.media.icon_loading'),
|
|
errorholderSrc: $r('app.media.icon_failed'),
|
|
}
|
|
|
|
});
|
|
Button('bmp')
|
|
.onClick(() => {
|
|
this.transformSquare2(bmpUrl);
|
|
this.imageKnifeOption = {
|
|
loadSrc: bmpUrl,
|
|
placeholderSrc: $r('app.media.icon_loading'),
|
|
errorholderSrc: $r('app.media.icon_failed'),
|
|
}
|
|
});
|
|
Button('jpg')
|
|
.onClick(() => {
|
|
this.transformSquare2(jpgUrl);
|
|
this.imageKnifeOption = {
|
|
loadSrc: jpgUrl,
|
|
placeholderSrc: $r('app.media.icon_loading'),
|
|
errorholderSrc: $r('app.media.icon_failed'),
|
|
}
|
|
});
|
|
// Button('gif')
|
|
// .onClick(() => {
|
|
// // this.transformSquare2(gifUrl);
|
|
// this.imageKnifeOption = {
|
|
// loadSrc: gifUrl,
|
|
// placeholderSrc: $r('app.media.icon_loading'),
|
|
// errorholderSrc: $r('app.media.icon_failed'),
|
|
// }
|
|
// });
|
|
// Button('webp')
|
|
// .onClick(() => {
|
|
// // this.transformSquare2(webpUrl);
|
|
// this.imageKnifeOption = {
|
|
// loadSrc: webpUrl,
|
|
// placeholderSrc: $r('app.media.icon_loading'),
|
|
// errorholderSrc: $r('app.media.icon_failed'),
|
|
// }
|
|
// });
|
|
}.margin({ top: 20, bottom: 20 })
|
|
|
|
Text("降采样字节大小:" + this.bytesNumber)
|
|
this.TextInputSample()
|
|
Column() {
|
|
if (this.mSquarePixelMap) {
|
|
Image(this.mSquarePixelMap == undefined ? '' : this.mSquarePixelMap!)
|
|
.objectFit(ImageFit.Fill)
|
|
.width(200)
|
|
.height(200)
|
|
.margin({ top: 10 })
|
|
}
|
|
Text('component用法')
|
|
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(200).height(200)
|
|
}.height("100%").width('100%').backgroundColor(Color.Pink)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.height('100%')
|
|
}
|
|
}
|
|
|