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

降采样 报错修改

This commit is contained in:
sijainguo 2024-04-29 19:29:42 +08:00
parent 81811761e2
commit 5e7d9c7f5f
15 changed files with 755 additions and 700 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
entry/src/main/ets/pages/DownsamplingPage.ets Normal file
View File

@ -0,0 +1,147 @@
/*
* Copyright (C) 2021 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 { RequestOption, ImageKnifeGlobal, ImageKnifeOption, ImageKnifeComponent } from '@ohos/libraryimageknife'
import { BusinessError } from '@ohos.base'
import { ImageKnifeData } from '@ohos/libraryimageknife'
import {
DownsampleNone,
FitCenter
} from '@ohos/imageknife/src/main/ets/components/inageknife/Downsampling/Downsamplestartegy'
// PixelMap transform示例
let mRotate: number = 0;
//let mUrl= "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVqqB" let murl = $r('app.media.pngSample'); let setting = new DownsampleNone()
let mUrl = $r('app.media.pngSample');
let setting = new DownsampleNone()
@Entry
@Component
struct DownsamplingPage {
@State url: string = "";
@State mCropPixelMap?: PixelMap = undefined;
@state mRoundPixelMap?: PixelMap = undefined;
@State mCirclePixelMap?: PixelMap = undefined;
@State mCircleBorderPixelMap?: PixelMap = undefined;
@state mRotatePixelMap?: PixelMap = undefined;
@state mSquarePixelMap?: PixelMap = undefined;
@state mSquarePixelMap1?: PixelMap = undefined;
@state mClipCenterPixelMap?: PixelMap = undefined;
@state mClipBottomPixelMap?: PixelMap = undefined;
@state mGrayscalePixelMap?: PixelMap = undefined;
@state mBrightnessPixelMap?: PixelMap = undefined;
@State mContrastPixelMap?: PixelMap = undefined;
@state mInvertPixelMap?: PixelMap = undefined;
@state mSepiaPixelMap?: PixelMap = undefined;
@State mSketchPixelMap?: PixelMap = undefined;
@state mBlurPixelMap?: PixelMap = undefined;
@state mPixelPixelMap?: PixelMap = undefined;
@State mSwirlPixelMap?: PixelMap = undefined;
@State mMaskPixelMap?: PixelMap = undefined;
@State mKuwaharaPixelMap?: PixelMap = undefined;
@State mToonPixelMap?: PixelMap = undefined;
@State mVignettePixelMap?: PixelMap = undefined;
@State BytesNumber: number = 0;
@State BytesNumber1: number = 0;
@state imageKnifeOption2: ImageKnifeOption =
{
loadSrc: $r('app.media.gifSample'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
downsampling: new DownsampleNone()
};
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
Column() {
Column() {
Column() {
Text("大小:" + this.BytesNumber).fontColor(Color.Gray).fontsize(16);
Button() {
Text($r("app.string.trans_square")).fontSize(13).fontColor(Color.White)
}
.height(35)
.width(120)
.margin({ top: 10 })
.onclick(() => {
this.transformSquare();
});
if (this.mSquarePixelMap) {
Image(this.mSquarePixelMap == undefined ? "" : this.mSquarePixelMap!)
.objectFit(ImageFit.Fill)
.width(200)
.height(200)
.margin({ top: 10 })
}
}.margin({ top: 10 });
}.margin({ bottom: 30 });
Column() {
Column() {
Text("大小:" + this.BytesNumber1).fontColor(Color.Gray).fontSize(16);
Button() {
Text('降采样').fontsize(13).fontColor(Color.White)
}
.height(35).width(120)
.margin({ top: 10 })
.onClick(() => {
this.transformSquare1();
});
if (this.mSquarePixelMap1) {
Image(this.mSquarePixelMap1 == undefined ? '' : this.mSquarePixelMap1!)
.objectFit(ImageFit.Fill)
.width(200)
.height(200)
.margin({ top: 10 })
}
}.margin({ top: 10 });
}.margin({ bottom: 30 });
Column() {
column() {
Text("ImageKnifeComponent用法").fontColor(Color.Gray).fontSize(16);
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 })
.width(200)
.height(200)
}.margin({ top: 10 });
}.margin({ bottom: 30 });
}
}.width('100%').height('100%');
}
//正方形裁剪
transformSquare() {
let imageKnifeOption = new RequestOption();
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;
} })
ImageKnife?.call(imageKnifeOption);
}
transformSquare1() {
let imageKnifeOption = 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;
} })
.setImageViewsize({ width: 800, height: 500 })
.downsampleStrategy(new FitCenter())
ImageKnife?.call(imageKnifeOption);
}
}
let ImageKnife = ImageKnifeGlobal.getInstance().getImageKnife();

4
entry/src/main/ets/pages/imageknifeTestCaseIndex.ets
View File

@ -40,6 +40,10 @@ struct IndexFunctionDemo {
console.log("优先级加载")
router.pushUrl({ url: "pages/testPriorityComponent" });
}).margin({ top: 5, left: 3 })
Button("下采样加载")
.onClick(() => {
router.pushUrl({ url: "pages/DownsamplingPage" });
}).margin({ top: 5, left: 3 })
}.width('100%').height(60).backgroundColor(Color.Pink)
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {

3
entry/src/main/resources/base/profile/main_pages.json
View File

@ -56,6 +56,7 @@
"pages/testImageKnifeHeic",
"pages/testImageKnifeNetPlaceholder",
"pages/testCustomDataFetchClientWithPage",
"pages/testReuseAblePages"
"pages/testReuseAblePages",
"pages/DownsamplingPage"
]
}

2
library/index.ets
View File

@ -131,3 +131,5 @@ export { IDrawLifeCycle } from './src/main/ets/components/imageknife/interface/I
// 日志管理
export { LogUtil } from './src/main/ets/components/imageknife/utils/LogUtil'
/*下采样*/
export {Downsampler} from './src/main/ets/components/imageknife/Downsampling/Downsampler'

4
library/src/main/ets/components/imageknife/Downsampling/BaseDownsampling.ets
View File

@ -1,6 +1,6 @@
import {lang}from '@kit.ArkTs';
type ISendable=lang.ISendable;
export interface BaseDownsampling{
type ISendable = lang.ISendable;
export interface BaseDownsampling extends ISendable{
getName():string
getScaleFactor(sourceWidth:number, sourceHeight:number, requestWidth:number, requestHeight:number):number

51
library/src/main/ets/components/imageknife/Downsampling/DownsampleStartegy.ets
View File

@ -4,14 +4,15 @@ import { BaseDownsampling } from './BaseDownsampling'
export class CenterInside{
getName() { return "CenterInside"}
getScaleFactor(sourceWidth:number, sourceHeight:number,requestWidth:number, requestHeight:number):number {
return Math.min(1,FitCenter.getScaleFactor(sourceWidth, sourceHeight, requestWidth, requestHeight))
return Math.min(1,this.getScale(sourceWidth, sourceHeight, requestWidth, requestHeight))
}
getSampleSizeRounding(sourceWidth:number, sourceHeight:number, requestWidth:number, requestHeight:number):SampleSizeRounding {
return this.getScaleFactor(sourceWidth, sourceHeight, requestWidth, requestHeight)==1
?SampleSizeRounding.QUALITY
:FitCenter.getSampleSizeRounding(sourceWidth, sourceHeight, requestWidth, requestHeight)
return 1
}
getScale(sourceWidth: number, sourceHeight: number, requestWidth: number, requestHeight: number): number {
let widthPercentage =requestWidth/sourceWidth
let heightPercentage =requestHeight/sourceHeight
return Math.min(widthPercentage,heightPercentage)
}
}
@ -26,26 +27,34 @@ export class DownsampleNone implements BaseDownsampling{
}
getSampleSizeRounding(sourceWidth: number, sourceHeight: number, requestWidth: number, requestHeight: number): number {
return SampleSizeRounding.QUALITY
return 1
}
}
/* 下采样使得图像的组大尺寸在给定的尺寸的1/2之间*/
@Sendable
export class AtMost implements BaseDownsampling{
export class AtMost implements BaseDownsampling{
getName(){
return "AtMost"
}
getScaleFactor(sourceWidth: number, sourceHeight: number, requestWidth:number,requestHeight: number): number {
let maxIntegerFactor=Math.ceil(Math.max(sourceHeight/requestHeight,sourceWidth/requestWidth));
let lesserOrEqualSampleSize = Math.max(1,highestOneBit(maxIntegerFactor))
let lesserOrEqualSampleSize = Math.max(1,this.highestOneBit(maxIntegerFactor))
let greaterOrEqualSampleSize = lesserOrEqualSampleSize<<(lesserOrEqualSampleSize<maxIntegerFactor?1:0)
return 1/greaterOrEqualSampleSize
}
getSampleSizeRounding(sourceWidth: number, sourceHeight: number, requestWidth: number, requestHeight: number): number {
return SampleSizeRounding.MEMORY
}
highestOneBit(i: number): number {
i |= (i >> 1);
i |= (i >> 2);
i |= (i >> 4);
i |= (i >> 8);
i |= (i >> 16);
return i - (i >>> 1);
}
}
@Sendable
export class Atleast implements BaseDownsampling{
@ -54,16 +63,26 @@ export class Atleast implements BaseDownsampling{
}
getScaleFactor(sourceWidth: number, sourceHeight: number, requestWidth: number, requestHeight: number): number {
let minIntegerFactor=Math.floor(Math.min(sourceHeight/requestHeight,sourceWidth/requestWidth))
return minIntegerFactor==0?1:1/highestOneBit(minIntegerFactor)
return minIntegerFactor==0?1:1/this.highestOneBit(minIntegerFactor)
}
getSampleSizeRounding(sourceWidth: number, sourceHeight: number, requestWidth: number, requestHeight: number): number {
return SampleSizeRounding.QUALITY
return 1
}
highestOneBit(i: number): number {
i |= (i >> 1);
i |= (i >> 2);
i |= (i >> 4);
i |= (i >> 8);
i |= (i >> 16);
return i - (i >>> 1);
}
}
@Sendable
export class CenterOutside implements BaseDownsampling{
static getSampleSizeRounding(orientedSourceWidth: number, orientedSourceHeight: number, targetWidth: number, targetHeight: number): SampleSizeRounding {
throw new Error('Method not implemented.')
}
getName(){
return "CenterOutside"
}
@ -74,7 +93,7 @@ export class CenterOutside implements BaseDownsampling{
}
getSampleSizeRounding(sourceWidth: number, sourceHeight: number, requestWidth: number, requestHeight: number): number {
return SampleSizeRounding.QUALITY
return 1
}
}
@ -84,13 +103,13 @@ export class FitCenter{
getName(){
return "FitCenter"
}
public static getScaleFactor(sourceWidth: number, sourceHeight: number, requestWidth: number, requestHeight: number): number {
getScaleFactor(sourceWidth: number, sourceHeight: number, requestWidth: number, requestHeight: number): number {
let widthPercentage =requestWidth/sourceWidth
let heightPercentage =requestHeight/sourceHeight
return Math.min(widthPercentage,heightPercentage)
}
public static getSampleSizeRounding(sourceWidth: number, sourceHeight: number, requestWidth: number, requestHeight: number): number {
return SampleSizeRounding.MEMORY
getSampleSizeRounding(sourceWidth: number, sourceHeight: number, requestWidth: number, requestHeight: number): number {
return 1
}
}

2
library/src/main/ets/components/imageknife/Downsampling/Downsampler.ets
View File

@ -52,7 +52,7 @@ export class Downsampler {
let heightScaleFactor = Math.floor(orientedSourceHeight / outHeight);
let scaleFactor = rounding == SampleSizeRounding.MEMORY ? Math.max(widthScaleFactor, heightScaleFactor) : Math.min(widthScaleFactor, heightScaleFactor)
// 将整型的缩放因子转换为2的次幂采样大小
let powerOfTwoSampleSize: number;
let powerOfTwoSampleSize: number = 0;
if (rounding == SampleSizeRounding.MEMORY && powerOfTwoSampleSize < (1 / exactScaleFactor)) {
powerOfTwoSampleSize = powerOfTwoSampleSize << 1;
}

2
library/src/main/ets/components/imageknife/ImageKnife.ets
View File

@ -810,8 +810,6 @@ async function taskExecute(sendData:SendableData,taskData:TaskParams): Promise<P
newRequestOption.thumbSizeMultiplier = sendData.getThumbSizeMultiplier();
newRequestOption.thumbDelayTime = sendData.getThumbDelayTime();
newRequestOption.size = taskData.size;
newRequestOption.placeholderRegisterCacheKey = sendData.getPlaceHolderRegisterCacheKey();
newRequestOption.placeholderRegisterMemoryCacheKey = sendData.getPlaceHolderRegisterMemoryCacheKey();
newRequestOption.downsampType = sendData.getDownsampType();
if(taskData.placeholderSrc){
newRequestOption.placeholderSrc = taskData.placeholderSrc as string | PixelMap | Resource | undefined;

1096
library/src/main/ets/components/imageknife/RequestOption.ets
View File

File diff suppressed because it is too large Load Diff

22
library/src/main/ets/components/imageknife/SendableData.ets
View File

@ -41,8 +41,6 @@ export class SendableData{
private diskMemoryCachePath: string = '';
private diskMemoryCache?: DiskLruCache;
private dataFetch: IDataFetch = new DownloadClient();
private placeholderRegisterCacheKey: string = "";
private placeholderRegisterMemoryCacheKey: string = "";
private downsampType: BaseDownsampling = new DownsampleNone();
public setDataFetch(value: IDataFetch) {
this.dataFetch = value;
@ -181,24 +179,8 @@ export class SendableData{
return this.usageType;
}
public setPlaceHolderRegisterCacheKey(value: string) {
this.placeholderRegisterCacheKey = value;
}
public getPlaceHolderRegisterCacheKey(): string {
return this.placeholderRegisterCacheKey;
}
public setPlaceHolderRegisterMemoryCacheKey(value: string) {
this.placeholderRegisterMemoryCacheKey = value;
}
public getPlaceHolderRegisterMemoryCacheKey(): string {
return this.placeholderRegisterMemoryCacheKey;
}
public setDownsampType(Type: BaseDownsampling) {
this.downsampType = Type;
public setDownsampType(Type: BaseDownsampling): BaseDownsampling{
return this.downsampType = Type;
}
public getDownsampType(): BaseDownsampling {

19
library/src/main/ets/components/imageknife/requestmanage/RequestManager.ets
View File

@ -33,7 +33,6 @@ import { GIFFrame } from '../utils/gif/GIFFrame'
import { LogUtil } from '../../imageknife/utils/LogUtil'
import { BusinessError } from '@ohos.base'
import { DataFetchResult } from '../networkmanage/DataFetchResult'
import { RequestOption } from '../RequestOption';
export enum Stage {
@ -167,7 +166,7 @@ export class RequestManager {
// gif、webp处理
if ((ImageKnifeData.GIF == typeValue || ImageKnifeData.WEBP == typeValue) && !request.dontAnimateFlag) {
// 处理gif、webp
this.gifProcess(onComplete, onError, arrayBuffer, typeValue)
this.gifProcess(onComplete, onError, arrayBuffer, typeValue,request)
} else if (ImageKnifeData.SVG == typeValue) {
// 处理svg
this.svgProcess(request, onComplete, onError, arrayBuffer, typeValue)
@ -188,7 +187,7 @@ export class RequestManager {
let success = (value: PixelMap) => {
onComplete(value);
}
this.mParseImageUtil.parseImage(arrayBuffer, success, onError,request, request)
this.mParseImageUtil.parseImage(arrayBuffer, success, onError,request)
}
}
}
@ -534,9 +533,17 @@ export class RequestManager {
svgParseImpl.parseSvg(option, arraybuffer, onComplete, onError)
}
private gifProcess(onComplete: (value: PixelMap | GIFFrame[]) => void | PromiseLike<ImageKnifeData>, onError: (reason?: BusinessError | string) => void, arraybuffer: ArrayBuffer, typeValue: string, cacheStrategy?: (cacheData: ImageKnifeData) => void) {
private gifProcess(
onComplete: (value: PixelMap | GIFFrame[]) => void | PromiseLike<ImageKnifeData>,
onError: (reason?: BusinessError | string) => void,
arraybuffer: ArrayBuffer,
typeValue: string,
request?:RequestOption,
cacheStrategy?: (cacheData: ImageKnifeData) => void
) {
let gifParseImpl = new GIFParseImpl()
gifParseImpl.parseGifs(arraybuffer, (data?: GIFFrame[], err?: BusinessError | string) => {
gifParseImpl.parseGifs(
arraybuffer, (data?: GIFFrame[], err?: BusinessError | string) => {
if (err) {
onError(err)
}
@ -552,6 +559,6 @@ export class RequestManager {
} else {
onError('Parse GIF callback data is null, you need check callback data!')
}
})
},request)
}
}

2
library/src/main/ets/components/imageknife/utils/ParseImageUtil.ets
View File

@ -43,7 +43,7 @@ export class ParseImageUtil implements IParseImage<PixelMap> {
editable: true,
desiredSize: defaultSize
};
if(request.downsampType.getName()!=='DownsampleNone'){
if(request?.downsampType.getName()!=='DownsampleNone'){
const b:ESObject = new Downsampler().calculateScaling(imageinfo, hValue, wValue,request)
opts= {
editable: true,

38
library/src/main/ets/components/imageknife/utils/gif/GIFParseImpl.ets
View File

@ -34,7 +34,11 @@ export interface gifBackData {
}
export class GIFParseImpl implements IParseGif {
parseGifs(imageinfo: ArrayBuffer, callback: (data?: GIFFrame[], err?: BusinessError | string) => void) {
parseGifs(
imageinfo: ArrayBuffer,
callback: (data?: GIFFrame[], err?: BusinessError | string) => void,
_request?: RequestOption
) {
// 硬解码流程
let imageSource = image.createImageSource(imageinfo);
let decodeOpts: image.DecodingOptions = {
@ -42,7 +46,29 @@ export class GIFParseImpl implements IParseGif {
editable: true,
rotate: 0
}
let data:GIFFrame[] = [];
let hValue: number = 0
let wValue: number = 0
imageSource.getImageInfo().then((value) => {
hValue = Math.round(value.size, height);
wValue = Math.round(value.size, height);
console.log('原始宽高：', JSON.stringify(value.size))
console.log('classType', JSON.stringify(_request?.downsampType.getName()))
console.log('classType2', hValue, wValue)
if (_request?.downsampType.getName() !== 'DownsampleNone') {
const b: ESObject = new Downsampler().calculateScaling(imageinfo, Math.round(value.size.height), Math.round(value.size.width), _request)
console.log("classType1", JSON.stringify(b))
decodeOpts = {
sampleSize: 1,
editable: true,
rotate: 0,
desiredSize: {
width: b.targetWidth,
height: b.targetHeight
}
}
}
})
let data: GIFFrame[] = [];
imageSource.createPixelMapList(decodeOpts).then((pixelList: Array<PixelMap>) => {
//sdk的api接口发生变更：从.getDelayTime() 变为.getDelayTimeList()
imageSource.getDelayTimeList().then(delayTimes => {
@ -60,20 +86,20 @@ export class GIFParseImpl implements IParseGif {
}
data.push(frame)
}
callback(data,undefined)
callback(data, undefined)
imageSource.release();
}).catch((err: string) => {
imageSource.release();
callback(undefined,err)
callback(undefined, err)
})
}
}).catch((err: string) => {
imageSource.release();
callback(undefined,err)
callback(undefined, err)
})
}).catch((err: string) => {
imageSource.release();
callback(undefined,err)
callback(undefined, err)
})
}
}

6
library/src/main/ets/components/imageknife/utils/gif/IParseGif.ets
View File

@ -17,5 +17,9 @@ import { GIFFrame } from './GIFFrame'
import worker from '@ohos.worker';
export interface IParseGif{
// gif解析
parseGifs:(imageinfo: ArrayBuffer, callback: (data?:GIFFrame[], err?:BusinessError|string) => void, worker?:worker.ThreadWorker,runMainThread?:boolean)=>void
parseGifs:(
imageinfo: ArrayBuffer,
callback: (data?:GIFFrame[], err?:BusinessError|string) => void,
request:ESObject,
worker?:worker.ThreadWorker,runMainThread?:boolean)=>void
}

15
library/src/main/ets/components/imageknife/utils/svg/SVGParseImpl.ets
View File

@ -17,6 +17,7 @@ import { RequestOption } from '../../RequestOption'
import { BusinessError } from '@ohos.base'
import { ImageKnifeData, ImageKnifeType } from '../../ImageKnifeData'
import image from '@ohos.multimedia.image'
import { Downsampler } from '../../Downsampling/Downsampler'
export class SVGParseImpl implements IParseSvg {
parseSvg(option: RequestOption, imageInfo: ArrayBuffer,
@ -24,20 +25,10 @@ export class SVGParseImpl implements IParseSvg {
onErrorFunction: (reason?: BusinessError | string) => void) {
let imageSource: image.ImageSource = image.createImageSource(imageInfo); // 步骤一：文件转为pixelMap 然后变换 给Image组件
let hValue = Math.round(option.size.height);
let wValue = Math.round(option.size.width);
let defaultSize: image.Size = {
height: hValue,
width: wValue
};
let opts: image.DecodingOptions = {
editable: true,
desiredSize: defaultSize
};
imageSource.getInageInfo().then((value) => {
imageSource.getImageInfo().then((value) => {
let hValue = Math.round(value.size.height);
let wValue = Math.round(value.size.width);
let defaultSize: image.size = {
let defaultSize: image.Size = {
height: hValue,
width: wValue
};