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