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

降采样适配 

Signed-off-by: tsm <2418639820@qq.com>
This commit is contained in:
tsm 2024-05-22 16:33:57 +08:00
parent 620abe6468
commit c4f43817a1
1 changed files with 120 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

203
entry/src/main/ets/pages/downsamplingPage.ets
View File

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