879 lines
28 KiB
Plaintext
879 lines
28 KiB
Plaintext
/*
|
|
* 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} from '@ohos/imageknife'
|
|
import {CropCircleTransformation} from '@ohos/imageknife'
|
|
import {RoundedCornersTransformation} from '@ohos/imageknife'
|
|
import {CropCircleWithBorderTransformation} from '@ohos/imageknife/src/main/ets/components/imageknife/transform/CropCircleWithBorderTransformation'
|
|
import {RotateImageTransformation} from '@ohos/imageknife'
|
|
import {CropSquareTransformation} from '@ohos/imageknife'
|
|
import {CropTransformation} from '@ohos/imageknife'
|
|
import {CropType} from '@ohos/imageknife'
|
|
import {GrayscaleTransformation} from '@ohos/imageknife'
|
|
import {BrightnessFilterTransformation} from '@ohos/imageknife'
|
|
import {ContrastFilterTransformation} from '@ohos/imageknife'
|
|
import {InvertFilterTransformation} from '@ohos/imageknife'
|
|
import {SepiaFilterTransformation} from '@ohos/imageknife'
|
|
import {SketchFilterTransformation} from '@ohos/imageknife'
|
|
import {BlurTransformation} from '@ohos/imageknife'
|
|
import {PixelationFilterTransformation} from '@ohos/imageknife'
|
|
import {MaskTransformation} from '@ohos/imageknife'
|
|
import {SwirlFilterTransformation} from '@ohos/imageknife'
|
|
import {PixelMapPack} from '@ohos/imageknife'
|
|
|
|
/**
|
|
* PixelMap transform 示例
|
|
*/
|
|
let mRotate: number = 0;
|
|
//let mUrl = "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB"
|
|
let mUrl = $r('app.media.check_big');
|
|
|
|
@Entry
|
|
@Component
|
|
struct TransformPixelMapPage {
|
|
@State url: string= "";
|
|
@State mCropPixelMap: PixelMapPack= new PixelMapPack();
|
|
@State mRoundPixelMap: PixelMapPack= new PixelMapPack();
|
|
@State mCirclePixelMap: PixelMapPack= new PixelMapPack();
|
|
@State mCircleBorderPixelMap: PixelMapPack= new PixelMapPack();
|
|
@State mRotatePixelMap: PixelMapPack= new PixelMapPack();
|
|
@State mSquarePixelMap: PixelMapPack= new PixelMapPack();
|
|
@State mClipTopPixelMap: PixelMapPack= new PixelMapPack();
|
|
@State mClipCenterPixelMap: PixelMapPack= new PixelMapPack();
|
|
@State mClipBottomPixelMap: PixelMapPack= new PixelMapPack();
|
|
@State mGrayscalePixelMap: PixelMapPack= new PixelMapPack();
|
|
@State mBrightnessPixelMap: PixelMapPack= new PixelMapPack();
|
|
@State mContrastPixelMap: PixelMapPack= new PixelMapPack();
|
|
@State mInvertPixelMap: PixelMapPack= new PixelMapPack();
|
|
@State mSepiaPixelMap: PixelMapPack= new PixelMapPack();
|
|
@State mSketchPixelMap: PixelMapPack= new PixelMapPack();
|
|
@State mBlurPixelMap: PixelMapPack= new PixelMapPack();
|
|
@State mPixelPixelMap: PixelMapPack= new PixelMapPack();
|
|
@State mSwirlPixelMap: PixelMapPack= new PixelMapPack();
|
|
@State mMaskPixelMap: PixelMapPack= new PixelMapPack();
|
|
|
|
build() {
|
|
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
|
|
Scroll() {
|
|
Column() {
|
|
Column() {
|
|
Text("基础变换").fontColor(Color.Gray).fontSize(16);
|
|
Row({ space: 1 }) {
|
|
Button() {
|
|
Text("CenterCrop").fontSize(13).fontColor(Color.White)
|
|
}
|
|
.height(35)
|
|
.width(100)
|
|
.onClick(() => {
|
|
this.centerCrop();
|
|
});
|
|
Button() {
|
|
Text("CenterInside").fontSize(13).fontColor(Color.White)
|
|
}
|
|
.height(35)
|
|
.width(100)
|
|
.onClick(() => {
|
|
this.centerInside();
|
|
});
|
|
Button() {
|
|
Text("fitCenter").fontSize(13).fontColor(Color.White)
|
|
}
|
|
.height(35)
|
|
.width(100)
|
|
.onClick(() => {
|
|
this.fitCenter();
|
|
});
|
|
}.margin({ top: 10 })
|
|
|
|
Image(this.mCropPixelMap.pixelMap)
|
|
.objectFit(ImageFit.None)
|
|
.width(100)
|
|
.height(100)
|
|
.backgroundColor("#23d1de")
|
|
.margin({ top: 10 })
|
|
|
|
}.margin({ top: 10 });
|
|
|
|
Column() {
|
|
Text("RoundedCornersTransformation").fontColor(Color.Gray).fontSize(16);
|
|
Row({ space: 1 }) {
|
|
Button() {
|
|
Text($r("app.string.left_top_corner")).fontSize(13).fontColor(Color.White)
|
|
}
|
|
.height(35)
|
|
.width(72)
|
|
.onClick(() => {
|
|
this.roundedCornersTransformation(10, 0, 0, 0);
|
|
});
|
|
Button() {
|
|
Text($r("app.string.r_top_corner")).fontSize(13).fontColor(Color.White)
|
|
}
|
|
.height(35)
|
|
.width(72)
|
|
.onClick(() => {
|
|
this.roundedCornersTransformation(0, 0, 10, 0);
|
|
});
|
|
Button() {
|
|
Text($r("app.string.left_bottom_corner")).fontSize(13).fontColor(Color.White)
|
|
}
|
|
.height(35)
|
|
.width(72)
|
|
.onClick(() => {
|
|
this.roundedCornersTransformation(0, 10, 0, 0);
|
|
});
|
|
Button() {
|
|
Text($r("app.string.r_bottom_corner")).fontSize(13).fontColor(Color.White)
|
|
}
|
|
.height(35)
|
|
.width(72)
|
|
.onClick(() => {
|
|
this.roundedCornersTransformation(0, 0, 0, 10);
|
|
});
|
|
Button("All")
|
|
.fontSize(13)
|
|
.height(35)
|
|
.width(72)
|
|
.onClick(() => {
|
|
this.roundedCornersTransformation(10, 10, 10, 10);
|
|
});
|
|
}.margin({ top: 10 })
|
|
|
|
Image(this.mRoundPixelMap.pixelMap)
|
|
.objectFit(ImageFit.Fill)
|
|
.width(100)
|
|
.height(100)
|
|
.margin({ top: 10 })
|
|
|
|
}.margin({ top: 10 });
|
|
|
|
Column() {
|
|
Text("CropCircleTransformation").fontColor(Color.Gray).fontSize(16);
|
|
Button() {
|
|
Text($r("app.string.trans_circle")).fontSize(13).fontColor(Color.White)
|
|
}
|
|
.height(35)
|
|
.width(120)
|
|
.margin({ top: 10 })
|
|
.onClick(() => {
|
|
this.circleTransformation();
|
|
});
|
|
Image(this.mCirclePixelMap.pixelMap)
|
|
.width(200)
|
|
.height(200)
|
|
.margin({ top: 10 })
|
|
|
|
}.margin({ top: 10 });
|
|
|
|
Column() {
|
|
Text("CropCircleWithBorderTransformation").fontColor(Color.Gray).fontSize(16);
|
|
Button() {
|
|
Text($r("app.string.trans_circle_border")).fontSize(13).fontColor(Color.White)
|
|
}
|
|
.height(35)
|
|
.width(120)
|
|
.margin({ top: 10 })
|
|
.onClick(() => {
|
|
this.circleBorderTransformation(5);
|
|
});
|
|
Image(this.mCircleBorderPixelMap.pixelMap)
|
|
.width(200)
|
|
.height(200)
|
|
.margin({ top: 10 })
|
|
|
|
}.margin({ top: 10 });
|
|
|
|
Column() {
|
|
Text("RotateImageTransformation").fontColor(Color.Gray).fontSize(16);
|
|
Button() {
|
|
Text($r("app.string.trans_rotate")).fontSize(13).fontColor(Color.White)
|
|
}
|
|
.height(35)
|
|
.width(120)
|
|
.margin({ top: 10 })
|
|
.onClick(() => {
|
|
mRotate += 45;
|
|
if (mRotate > 360) {
|
|
mRotate = 0;
|
|
}
|
|
this.transformRotate(mRotate);
|
|
});
|
|
Image(this.mRotatePixelMap.pixelMap)
|
|
.width(200)
|
|
.height(200)
|
|
.margin({ top: 10 })
|
|
|
|
}.margin({ top: 10 });
|
|
|
|
Column() {
|
|
Text("CropSquareTransformation").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();
|
|
});
|
|
Image(this.mSquarePixelMap.pixelMap)
|
|
.objectFit(ImageFit.Fill)
|
|
.width(200)
|
|
.height(200)
|
|
.margin({ top: 10 })
|
|
|
|
}.margin({ top: 10 });
|
|
|
|
Column() {
|
|
Text("CropTransformation").fontColor(Color.Gray).fontSize(16);
|
|
Row({ space: 1 }) {
|
|
Button() {
|
|
Text($r("app.string.trans_clip_top")).fontSize(13).fontColor(Color.White)
|
|
}
|
|
.height(35)
|
|
.width(72)
|
|
.onClick(() => {
|
|
this.clipPixelMap(25, 25, CropType.TOP);
|
|
});
|
|
Button() {
|
|
Text($r("app.string.trans_clip_center")).fontSize(13).fontColor(Color.White)
|
|
}
|
|
.height(35)
|
|
.width(72)
|
|
.onClick(() => {
|
|
this.clipPixelMap(25, 25, CropType.CENTER);
|
|
});
|
|
Button() {
|
|
Text($r("app.string.trans_clip_bottom")).fontSize(13).fontColor(Color.White)
|
|
}
|
|
.height(35)
|
|
.width(72)
|
|
.onClick(() => {
|
|
this.clipPixelMap(25, 25, CropType.BOTTOM);
|
|
});
|
|
}.margin({ top: 10 })
|
|
|
|
Row({ space: 1 }) {
|
|
Image(this.mClipTopPixelMap.pixelMap)
|
|
.objectFit(ImageFit.Fill)
|
|
.width(100)
|
|
.height(100)
|
|
.margin({ top: 10 })
|
|
Image(this.mClipCenterPixelMap.pixelMap)
|
|
.objectFit(ImageFit.Fill)
|
|
.width(100)
|
|
.height(100)
|
|
.margin({ top: 10 })
|
|
Image(this.mClipBottomPixelMap.pixelMap)
|
|
.objectFit(ImageFit.Fill)
|
|
.width(100)
|
|
.height(100)
|
|
.margin({ top: 10 })
|
|
}
|
|
}.margin({ top: 10 });
|
|
|
|
Column() {
|
|
Text("GrayscaleTransformation").fontColor(Color.Gray).fontSize(16);
|
|
Button() {
|
|
Text($r("app.string.image_grayscale")).fontSize(13).fontColor(Color.White)
|
|
}
|
|
.height(35)
|
|
.width(120)
|
|
.margin({ top: 10 })
|
|
.onClick(() => {
|
|
this.grayscalePixelMap();
|
|
});
|
|
Image(this.mGrayscalePixelMap.pixelMap)
|
|
.objectFit(ImageFit.Fill)
|
|
.width(200)
|
|
.height(200)
|
|
.margin({ top: 10 })
|
|
|
|
}.margin({ top: 10 });
|
|
Column() {
|
|
Text("BrightnessFilterTransformation").fontColor(Color.Gray).fontSize(16);
|
|
Button() {
|
|
Text($r("app.string.image_Brightness")).fontSize(13).fontColor(Color.White)
|
|
}
|
|
.height(35)
|
|
.width(120)
|
|
.margin({ top: 10 })
|
|
.onClick(() => {
|
|
this.brightnessPixelMap(0.8);
|
|
});
|
|
Image(this.mBrightnessPixelMap.pixelMap)
|
|
.objectFit(ImageFit.Fill)
|
|
.width(200)
|
|
.height(200)
|
|
.margin({ top: 10 })
|
|
|
|
}.margin({ top: 10 });
|
|
Column() {
|
|
Text("ContrastFilterTransformation").fontColor(Color.Gray).fontSize(16);
|
|
Button() {
|
|
Text($r("app.string.image_Contrast")).fontSize(13).fontColor(Color.White)
|
|
}
|
|
.height(35)
|
|
.width(120)
|
|
.margin({ top: 10 })
|
|
.onClick(() => {
|
|
this.contrastPixelMap(4);
|
|
});
|
|
Image(this.mContrastPixelMap.pixelMap)
|
|
.objectFit(ImageFit.Fill)
|
|
.width(200)
|
|
.height(200)
|
|
.margin({ top: 10 })
|
|
|
|
}.margin({ top: 10 });
|
|
Column() {
|
|
Text("InvertFilterTransformation").fontColor(Color.Gray).fontSize(16);
|
|
Button() {
|
|
Text($r("app.string.image_Invert")).fontSize(13).fontColor(Color.White)
|
|
}
|
|
.height(35)
|
|
.width(120)
|
|
.margin({ top: 10 })
|
|
.onClick(() => {
|
|
this.invertPixelMap();
|
|
});
|
|
Image(this.mInvertPixelMap.pixelMap)
|
|
.objectFit(ImageFit.Fill)
|
|
.width(200)
|
|
.height(200)
|
|
.margin({ top: 10 })
|
|
|
|
}.margin({ top: 10 });
|
|
|
|
Column() {
|
|
Text("SepiaFilterTransformation").fontColor(Color.Gray).fontSize(16);
|
|
Button() {
|
|
Text($r("app.string.image_Sepia")).fontSize(13).fontColor(Color.White)
|
|
}
|
|
.height(35)
|
|
.width(120)
|
|
.margin({ top: 10 })
|
|
.onClick(() => {
|
|
this.sepiaPixelMap();
|
|
});
|
|
Image(this.mSepiaPixelMap.pixelMap)
|
|
.objectFit(ImageFit.Fill)
|
|
.width(200)
|
|
.height(200)
|
|
.margin({ top: 10 })
|
|
|
|
}.margin({ top: 10 });
|
|
Column() {
|
|
Text("SketchFilterTransformation").fontColor(Color.Gray).fontSize(16);
|
|
Button() {
|
|
Text($r("app.string.image_Sketch")).fontSize(13).fontColor(Color.White)
|
|
}
|
|
.height(35)
|
|
.width(120)
|
|
.margin({ top: 10 })
|
|
.onClick(() => {
|
|
this.sketchPixelMap();
|
|
});
|
|
Image(this.mSketchPixelMap.pixelMap)
|
|
.objectFit(ImageFit.Fill)
|
|
.width(200)
|
|
.height(200)
|
|
.margin({ top: 10 })
|
|
|
|
}.margin({ top: 10 });
|
|
|
|
Column() {
|
|
Text("BlurTransformation").fontColor(Color.Gray).fontSize(16);
|
|
Button() {
|
|
Text($r("app.string.image_blur")).fontSize(13).fontColor(Color.White)
|
|
}
|
|
.height(35)
|
|
.width(120)
|
|
.margin({ top: 10 })
|
|
.onClick(() => {
|
|
this.blurHandlePixelMap(20);
|
|
});
|
|
Image(this.mBlurPixelMap.pixelMap)
|
|
.objectFit(ImageFit.Fill)
|
|
.width(200)
|
|
.height(200)
|
|
.margin({ top: 10 })
|
|
|
|
}.margin({ top: 10 });
|
|
|
|
|
|
Column() {
|
|
Text("PixelationFilterTransformation").fontColor(Color.Gray).fontSize(16);
|
|
Button() {
|
|
Text($r("app.string.image_pixel")).fontSize(13).fontColor(Color.White)
|
|
}
|
|
.height(35)
|
|
.width(120)
|
|
.margin({ top: 10 })
|
|
.onClick(() => {
|
|
this.pixelHandlePixelMap(20);
|
|
});
|
|
Image(this.mPixelPixelMap.pixelMap)
|
|
.objectFit(ImageFit.Fill)
|
|
.width(200)
|
|
.height(200)
|
|
.margin({ top: 10 })
|
|
|
|
}.margin({ top: 10 });
|
|
|
|
Column() {
|
|
Text("SwirlFilterTransformation").fontColor(Color.Gray).fontSize(16);
|
|
Button() {
|
|
Text("图片Swirl").fontSize(13).fontColor(Color.White)
|
|
}
|
|
.height(35)
|
|
.width(120)
|
|
.margin({ top: 10 })
|
|
.onClick(() => {
|
|
this.swirlHandlePixelMap();
|
|
});
|
|
Image(this.mSwirlPixelMap.pixelMap)
|
|
.objectFit(ImageFit.Fill)
|
|
.width(200)
|
|
.height(200)
|
|
.margin({ top: 10 })
|
|
|
|
}.margin({ top: 10 });
|
|
|
|
Column() {
|
|
Text("MaskTransformation").fontColor(Color.Gray).fontSize(16);
|
|
Button() {
|
|
Text("图片mask").fontSize(13).fontColor(Color.White)
|
|
}
|
|
.height(35)
|
|
.width(120)
|
|
.margin({ top: 10 })
|
|
.onClick(() => {
|
|
this.maskHandlePixelMap($r('app.media.mask_starfish'));
|
|
});
|
|
Image(this.mMaskPixelMap.pixelMap)
|
|
.objectFit(ImageFit.Fill)
|
|
.width(200)
|
|
.height(200)
|
|
.margin({ top: 10 })
|
|
|
|
}.margin({ top: 10 });
|
|
|
|
}.margin({ bottom: 30 });
|
|
|
|
}
|
|
}.width('100%').height('100%');
|
|
}
|
|
|
|
aboutToAppear() {
|
|
|
|
}
|
|
|
|
/**
|
|
* centerCrop
|
|
*/
|
|
centerCrop() {
|
|
var imageKnifeOption = new RequestOption();
|
|
imageKnifeOption.load($r('app.media.photo5'))
|
|
// imageKnifeOption.load(mUrl)
|
|
.addListener((err, data) => {
|
|
let result = new PixelMapPack();
|
|
this.mCropPixelMap = result;
|
|
setTimeout(() => {
|
|
let result2 = new PixelMapPack();
|
|
result2.pixelMap = data.imageKnifeValue as PixelMap;
|
|
this.mCropPixelMap = result2;
|
|
}, 100)
|
|
return false;
|
|
})
|
|
.setImageViewSize({ width: vp2px(100), height: vp2px(100) })
|
|
.skipMemoryCache(true)
|
|
.centerCrop();
|
|
ImageKnife.call(imageKnifeOption);
|
|
}
|
|
|
|
/**
|
|
* centerInside
|
|
*/
|
|
centerInside() {
|
|
var imageKnifeOption = new RequestOption();
|
|
imageKnifeOption.load($r('app.media.Back'))
|
|
.addListener((err, data) => {
|
|
let result = new PixelMapPack();
|
|
this.mCropPixelMap = result;
|
|
setTimeout(() => {
|
|
let result2 = new PixelMapPack();
|
|
result2.pixelMap = data.imageKnifeValue as PixelMap;
|
|
this.mCropPixelMap = result2;
|
|
}, 100)
|
|
return false;
|
|
})
|
|
.setImageViewSize({ width: vp2px(100), height: vp2px(100) })
|
|
.skipMemoryCache(true)
|
|
.centerInside();
|
|
ImageKnife.call(imageKnifeOption);
|
|
}
|
|
|
|
/**
|
|
* centerInside
|
|
*/
|
|
fitCenter() {
|
|
var imageKnifeOption = new RequestOption()
|
|
imageKnifeOption.load($r('app.media.Back'))
|
|
.addListener((err, data) => {
|
|
let result = new PixelMapPack();
|
|
this.mCropPixelMap = result;
|
|
setTimeout(() => {
|
|
let result2 = new PixelMapPack();
|
|
result2.pixelMap = data.imageKnifeValue as PixelMap;
|
|
this.mCropPixelMap = result2;
|
|
}, 100)
|
|
return false;
|
|
})
|
|
.setImageViewSize({ width: vp2px(100), height: vp2px(100) })
|
|
.skipMemoryCache(true)
|
|
.fitCenter();
|
|
ImageKnife.call(imageKnifeOption);
|
|
}
|
|
/**
|
|
* 圆角设置
|
|
*/
|
|
roundedCornersTransformation(top_left: number,
|
|
bottom_left: number, top_right: number, bottom_right: number) {
|
|
|
|
var imageKnifeOption = new RequestOption();
|
|
imageKnifeOption.load(mUrl)
|
|
.addListener((err, data) => {
|
|
let result = new PixelMapPack();
|
|
this.mRoundPixelMap = result;
|
|
setTimeout(() => {
|
|
let result2 = new PixelMapPack();
|
|
result2.pixelMap = data.imageKnifeValue as PixelMap;
|
|
this.mRoundPixelMap = result2;
|
|
}, 100)
|
|
return false;
|
|
})
|
|
.setImageViewSize({ width: vp2px(100), height: vp2px(100) })
|
|
.skipMemoryCache(true)
|
|
.roundedCorners({ top_left: top_left, top_right: top_right, bottom_left: bottom_left, bottom_right: bottom_right })
|
|
ImageKnife.call(imageKnifeOption);
|
|
}
|
|
|
|
/**
|
|
* 裁剪圆
|
|
*/
|
|
circleTransformation() {
|
|
let imageKnifeOption = new RequestOption();
|
|
imageKnifeOption.load(mUrl)
|
|
.addListener((err, data) => {
|
|
let result = new PixelMapPack();
|
|
result.pixelMap = data.imageKnifeValue as PixelMap;
|
|
this.mCirclePixelMap = result;
|
|
return false;
|
|
})
|
|
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
|
.skipMemoryCache(true)
|
|
.cropCircle()
|
|
ImageKnife.call(imageKnifeOption);
|
|
}
|
|
|
|
/**
|
|
* 圆环裁剪
|
|
*/
|
|
circleBorderTransformation(border: number) {
|
|
let imageKnifeOption = new RequestOption();
|
|
var circleTransformation = new CropCircleWithBorderTransformation(border,
|
|
{ r_color: 255, g_color: 204, b_color: 204 });
|
|
imageKnifeOption.load(mUrl)
|
|
.addListener((err, data) => {
|
|
let result = new PixelMapPack();
|
|
result.pixelMap = data.imageKnifeValue as PixelMap;
|
|
this.mCircleBorderPixelMap = result;
|
|
return false;
|
|
})
|
|
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
|
.skipMemoryCache(true)
|
|
.cropCircleWithBorder(border,
|
|
{ r_color: 255, g_color: 204, b_color: 204 })
|
|
ImageKnife.call(imageKnifeOption);
|
|
}
|
|
|
|
/**
|
|
* 旋转
|
|
*/
|
|
transformRotate(angled: number) {
|
|
let imageKnifeOption = new RequestOption();
|
|
var transformation = new RotateImageTransformation(angled);
|
|
imageKnifeOption.load(mUrl)
|
|
.addListener((err, data) => {
|
|
let result = new PixelMapPack();
|
|
result.pixelMap = data.imageKnifeValue as PixelMap;
|
|
this.mRotatePixelMap = result;
|
|
return false;
|
|
})
|
|
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
|
.skipMemoryCache(true)
|
|
.rotateImage(angled)
|
|
ImageKnife.call(imageKnifeOption);
|
|
}
|
|
|
|
/**
|
|
* 正方形裁剪
|
|
*/
|
|
transformSquare() {
|
|
let imageKnifeOption = new RequestOption();
|
|
var transformation = new CropSquareTransformation();
|
|
imageKnifeOption.load(mUrl)
|
|
.addListener((err, data) => {
|
|
let result = new PixelMapPack();
|
|
result.pixelMap = data.imageKnifeValue as PixelMap;
|
|
this.mSquarePixelMap = result;
|
|
return false;
|
|
})
|
|
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
|
.skipMemoryCache(true)
|
|
.cropSquare()
|
|
ImageKnife.call(imageKnifeOption);
|
|
}
|
|
|
|
/**
|
|
* 区域裁剪
|
|
*/
|
|
clipPixelMap(width: number, height: number, cropType: CropType) {
|
|
let imageKnifeOption = new RequestOption();
|
|
var transformation = new CropTransformation(width, height, cropType);
|
|
imageKnifeOption.load(mUrl)
|
|
.addListener((err, data) => {
|
|
let result = new PixelMapPack();
|
|
if (cropType == CropType.TOP) {
|
|
result.pixelMap = data.imageKnifeValue as PixelMap;
|
|
this.mClipTopPixelMap = result;
|
|
} else if (cropType == CropType.CENTER) {
|
|
result.pixelMap = data.imageKnifeValue as PixelMap;
|
|
this.mClipCenterPixelMap = result;
|
|
} else if (cropType == CropType.BOTTOM) {
|
|
result.pixelMap = data.imageKnifeValue as PixelMap;
|
|
this.mClipBottomPixelMap = result;
|
|
}
|
|
return false;
|
|
})
|
|
.setImageViewSize({ width: width, height: height })
|
|
.skipMemoryCache(true)
|
|
.crop(width, height, cropType)
|
|
ImageKnife.call(imageKnifeOption);
|
|
|
|
}
|
|
|
|
/**
|
|
* 灰度
|
|
*/
|
|
grayscalePixelMap() {
|
|
let imageKnifeOption = new RequestOption();
|
|
var transformation = new GrayscaleTransformation();
|
|
imageKnifeOption.load(mUrl)
|
|
.addListener((err, data) => {
|
|
let result = new PixelMapPack();
|
|
result.pixelMap = data.imageKnifeValue as PixelMap;
|
|
this.mGrayscalePixelMap = result;
|
|
return false;
|
|
})
|
|
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
|
.skipMemoryCache(true)
|
|
.grayscale()
|
|
ImageKnife.call(imageKnifeOption);
|
|
|
|
}
|
|
|
|
/**
|
|
*亮度b
|
|
*/
|
|
brightnessPixelMap(brightness: number) {
|
|
let imageKnifeOption = new RequestOption();
|
|
var transformation = new BrightnessFilterTransformation(brightness);
|
|
imageKnifeOption.load(mUrl)
|
|
.addListener((err, data) => {
|
|
let result = new PixelMapPack();
|
|
result.pixelMap = data.imageKnifeValue as PixelMap;
|
|
this.mBrightnessPixelMap = result;
|
|
return false;
|
|
})
|
|
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
|
.skipMemoryCache(true)
|
|
.brightnessFilter(brightness)
|
|
ImageKnife.call(imageKnifeOption);
|
|
|
|
}
|
|
|
|
/**
|
|
*对比度
|
|
*/
|
|
contrastPixelMap(contrast: number) {
|
|
let imageKnifeOption = new RequestOption();
|
|
var transformation = new ContrastFilterTransformation(contrast);
|
|
imageKnifeOption.load(mUrl)
|
|
.addListener((err, data) => {
|
|
let result = new PixelMapPack();
|
|
result.pixelMap = data.imageKnifeValue as PixelMap;
|
|
this.mContrastPixelMap = result;
|
|
return false;
|
|
})
|
|
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
|
.skipMemoryCache(true)
|
|
.contrastFilter(contrast)
|
|
ImageKnife.call(imageKnifeOption);
|
|
|
|
}
|
|
|
|
/**
|
|
*反转处理
|
|
*/
|
|
invertPixelMap() {
|
|
let imageKnifeOption = new RequestOption();
|
|
var transformation = new InvertFilterTransformation();
|
|
imageKnifeOption.load(mUrl)
|
|
.addListener((err, data) => {
|
|
let result = new PixelMapPack();
|
|
result.pixelMap = data.imageKnifeValue as PixelMap;
|
|
this.mInvertPixelMap = result;
|
|
return false;
|
|
})
|
|
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
|
.skipMemoryCache(true)
|
|
.invertFilter()
|
|
ImageKnife.call(imageKnifeOption);
|
|
|
|
}
|
|
|
|
/**
|
|
*照片老旧出来（黑褐色）
|
|
*/
|
|
sepiaPixelMap() {
|
|
let imageKnifeOption = new RequestOption();
|
|
var transformation = new SepiaFilterTransformation();
|
|
imageKnifeOption.load(mUrl)
|
|
.addListener((err, data) => {
|
|
let result = new PixelMapPack();
|
|
result.pixelMap = data.imageKnifeValue as PixelMap;
|
|
this.mSepiaPixelMap = result;
|
|
return false;
|
|
})
|
|
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
|
.skipMemoryCache(true)
|
|
.sepiaFilter()
|
|
ImageKnife.call(imageKnifeOption);
|
|
|
|
}
|
|
|
|
/**
|
|
*素描
|
|
*/
|
|
sketchPixelMap() {
|
|
let imageKnifeOption = new RequestOption();
|
|
var transformation = new SketchFilterTransformation();
|
|
imageKnifeOption.load(mUrl)
|
|
.addListener((err, data) => {
|
|
let result = new PixelMapPack();
|
|
result.pixelMap = data.imageKnifeValue as PixelMap;
|
|
this.mSketchPixelMap = result;
|
|
return false;
|
|
})
|
|
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
|
.skipMemoryCache(true)
|
|
.sketchFilter()
|
|
ImageKnife.call(imageKnifeOption);
|
|
|
|
}
|
|
|
|
/**
|
|
*模糊
|
|
*/
|
|
blurHandlePixelMap(radius: number) {
|
|
let imageKnifeOption = new RequestOption();
|
|
var transformation = new BlurTransformation(radius);
|
|
imageKnifeOption.load(mUrl)
|
|
.addListener((err, data) => {
|
|
let result = new PixelMapPack();
|
|
result.pixelMap = data.imageKnifeValue as PixelMap;
|
|
this.mBlurPixelMap = result;
|
|
return false;
|
|
})
|
|
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
|
.skipMemoryCache(true)
|
|
.blur(radius)
|
|
ImageKnife.call(imageKnifeOption);
|
|
|
|
}
|
|
/**
|
|
*马赛克
|
|
*/
|
|
pixelHandlePixelMap(pixel: number) {
|
|
let imageKnifeOption = new RequestOption();
|
|
var transformation = new PixelationFilterTransformation(pixel);
|
|
imageKnifeOption.load(mUrl)
|
|
.addListener((err, data) => {
|
|
let result = new PixelMapPack();
|
|
result.pixelMap = data.imageKnifeValue as PixelMap;
|
|
this.mPixelPixelMap = result;
|
|
return false;
|
|
})
|
|
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
|
.skipMemoryCache(true)
|
|
.pixelationFilter(pixel)
|
|
ImageKnife.call(imageKnifeOption);
|
|
|
|
}
|
|
|
|
/**
|
|
*扭曲
|
|
*/
|
|
swirlHandlePixelMap() {
|
|
let imageKnifeOption = new RequestOption();
|
|
var transformation = new SwirlFilterTransformation(80);
|
|
imageKnifeOption.load(mUrl)
|
|
.addListener((err, data) => {
|
|
let result = new PixelMapPack();
|
|
result.pixelMap = data.imageKnifeValue as PixelMap;
|
|
this.mSwirlPixelMap = result;
|
|
return false;
|
|
})
|
|
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
|
.skipMemoryCache(true)
|
|
.swirlFilter(80)
|
|
// .diskCacheStrategy(new NONE())
|
|
ImageKnife.call(imageKnifeOption);
|
|
|
|
}
|
|
/**
|
|
*遮罩
|
|
*/
|
|
maskHandlePixelMap(maskResource: Resource) {
|
|
let imageKnifeOption = new RequestOption();
|
|
var transformation = new MaskTransformation(maskResource);
|
|
// imageKnifeOption.load($r('app.media.photo6'))
|
|
imageKnifeOption.load(mUrl)
|
|
.addListener((err, data) => {
|
|
let result = new PixelMapPack();
|
|
result.pixelMap = data.imageKnifeValue as PixelMap;
|
|
this.mMaskPixelMap = result;
|
|
return false;
|
|
})
|
|
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
|
.skipMemoryCache(true)
|
|
.mask(maskResource)
|
|
// .diskCacheStrategy(new NONE())
|
|
ImageKnife.call(imageKnifeOption);
|
|
|
|
}
|
|
}
|
|
|
|
var ImageKnife = globalThis.exports.default.data.imageKnife |