@react-native-ohos/react-native-image-crop-picker 0.50.2-rc.3 → 0.50.2-rc.5

package/CHANGELOG.md

@@ -1,7 +1,129 @@
 # Changelog
-## 0.50.2-rc.3
-pre-release version 0.50.2-rc.3
 
-## v0.50.1
-## 更新内容
-* feat: add OpenHarmony support for react-native-image-crop-picker
+## 鸿蒙化Log
+
+### v0.50.2-rc.2
+
+- Fix the issue where the file size after compression is larger than the original file. 
+
+### v0.50.1
+
+- react-native-image-crop-picker仓库迁移 ([e09dff16cc4c51bfdcec842921d3c30d49d39a19](https://gitee.com/openharmony-sig/rntpc_react-native-image-crop-picker/pulls/1))
+- chore: add COMMITTERS.md ([6e71f31b17e5aba5a60215b58ddc6f656def74f9](https://gitee.com/openharmony-sig/rntpc_react-native-image-crop-picker/pulls/2))
+- pre-release: @react-native-ohos/react-native-image-crop-picker@0.50.2-rc.2([db47a7fb5b3960c0e05a93f83edb13a5113eade2](https://gitee.com/openharmony-sig/rntpc_react-native-image-crop-picker/pulls/4))
+
+## ReleaseLog
+
+### v0.50.0
+
+#### What's Changed
+
+- fix: Resolve OutOfMemoryError in image/video processing by [@GeeksEra](https://github.com/GeeksEra) in [#2137](https://github.com/ivpusic/react-native-image-crop-picker/pull/2137)
+- Update ImageCropPicker.m by [@uranashel44](https://github.com/uranashel44) in [#2129](https://github.com/ivpusic/react-native-image-crop-picker/pull/2129)
+- [BugFix - ios] Keep selection order by [@sean5940](https://github.com/sean5940) in [#2099](https://github.com/ivpusic/react-native-image-crop-picker/pull/2099)
+- Fix the issure in Android where the photo picker does not support a maxFiles selection limit. by [@xgtz421](https://github.com/xgtz421) in [#2147](https://github.com/ivpusic/react-native-image-crop-picker/pull/2147)
+- If the "maxFiles" keyword is missing, assign a default value of 5 to align with the documentation. by [@xgtz421](https://github.com/xgtz421) in [#2148](https://github.com/ivpusic/react-native-image-crop-picker/pull/2148)
+- New Architecture support by [@ivpusic](https://github.com/ivpusic) in [#2171](https://github.com/ivpusic/react-native-image-crop-picker/pull/2171)
+
+#### New Contributors
+
+- [@GeeksEra](https://github.com/GeeksEra) made their first contribution in [#2137](https://github.com/ivpusic/react-native-image-crop-picker/pull/2137)
+- [@uranashel44](https://github.com/uranashel44) made their first contribution in [#2129](https://github.com/ivpusic/react-native-image-crop-picker/pull/2129)
+- [@xgtz421](https://github.com/xgtz421) made their first contribution in [#2147](https://github.com/ivpusic/react-native-image-crop-picker/pull/2147)
+
+### v0.42.0
+
+#### What's Changed
+
+- Implement the new official Android Photo Picker by [@Pauligrinder](https://github.com/Pauligrinder) in [#2093](https://github.com/ivpusic/react-native-image-crop-picker/pull/2093)
+
+#### New Contributors
+
+- [@Pauligrinder](https://github.com/Pauligrinder) made their first contribution in [#2093](https://github.com/ivpusic/react-native-image-crop-picker/pull/2093)
+
+### v0.41.6
+
+#### What's Changed
+
+- Enhancement:: Add: Filename in response object for Android by [@AmeyShrivastava](https://github.com/AmeyShrivastava) in [#1945](https://github.com/ivpusic/react-native-image-crop-picker/pull/1945)
+- Fix openCamera reported dimensions for portrait photos on Android by [@gaearon](https://github.com/gaearon) in [#2110](https://github.com/ivpusic/react-native-image-crop-picker/pull/2110)
+
+#### New Contributors
+
+- [@AmeyShrivastava](https://github.com/AmeyShrivastava) made their first contribution in [#1945](https://github.com/ivpusic/react-native-image-crop-picker/pull/1945)
+- [@gaearon](https://github.com/gaearon) made their first contribution in [#2110](https://github.com/ivpusic/react-native-image-crop-picker/pull/2110)
+
+### v0.41.5
+
+#### What's Changed
+
+- fix: [iOS] Image is being resized up instead of down & Error "User did not grant library permission." in Android 10 by [@xhirazi](https://github.com/xhirazi) in [#2103](https://github.com/ivpusic/react-native-image-crop-picker/pull/2103)
+
+#### New Contributors
+
+- [@xhirazi](https://github.com/xhirazi) made their first contribution in [#2103](https://github.com/ivpusic/react-native-image-crop-picker/pull/2103)
+
+### v0.41.4
+
+#### What's Changed
+
+- Update example project by [@sean5940](https://github.com/sean5940) in [#2097](https://github.com/ivpusic/react-native-image-crop-picker/pull/2097)
+
+#### New Contributors
+
+- [@sean5940](https://github.com/sean5940) made their first contribution in [#2097](https://github.com/ivpusic/react-native-image-crop-picker/pull/2097)
+
+### v0.41.3
+
+#### What's Changed
+
+- feat(android):RN-0.73 and AGP 8.0 Compatibility by [@dishantwalia](https://github.com/dishantwalia) in [#2018](https://github.com/ivpusic/react-native-image-crop-picker/pull/2018)
+
+#### New Contributors
+
+- [@dishantwalia](https://github.com/dishantwalia) made their first contribution in [#2018](https://github.com/ivpusic/react-native-image-crop-picker/pull/2018)
+
+### v0.41.2
+
+#### What's Changed
+
+- Fixes an issue that would cause the compiler to crash in Xcode 16 beta1 by [@isnine](https://github.com/isnine) in [#2068](https://github.com/ivpusic/react-native-image-crop-picker/pull/2068)
+
+#### New Contributors
+
+- [@isnine](https://github.com/isnine) made their first contribution in [#2068](https://github.com/ivpusic/react-native-image-crop-picker/pull/2068)
+
+### v0.41.1
+
+#### What's Changed
+
+- URGENT: Updated RNImageCropPicker.podspec by [@ShivamKJJW](https://github.com/ShivamKJJW) in [#2056](https://github.com/ivpusic/react-native-image-crop-picker/pull/2056)
+- https://github.com/ivpusic/react-native-image-crop-picker/pull/2068)
+
+#### New Contributors
+
+- [@ShivamKJJW](https://github.com/ShivamKJJW) made their first contribution in [#2056](https://github.com/ivpusic/react-native-image-crop-picker/pull/2056)
+
+### v0.41.0
+
+#### What's Changed
+
+- fix(ios): replace `UIGraphicsBeginImageContext` in Compression.m by [@remarkablemark](https://github.com/remarkablemark) in [#2055](https://github.com/ivpusic/react-native-image-crop-picker/pull/2055)
+- Add Privacy manifest by [@ujeon](https://github.com/ujeon) in [#2045](https://github.com/ivpusic/react-native-image-crop-picker/pull/2045)
+- add Dutch (nl) as a translation for iOS by [@HostenMarijn](https://github.com/HostenMarijn) in [#1918](https://github.com/ivpusic/react-native-image-crop-picker/pull/1918)
+
+#### New Contributors
+
+- [@remarkablemark](https://github.com/remarkablemark) made their first contribution in [#2055](https://github.com/ivpusic/react-native-image-crop-picker/pull/2055)
+- [@ujeon](https://github.com/ujeon) made their first contribution in [#2045](https://github.com/ivpusic/react-native-image-crop-picker/pull/2045)
+- [@HostenMarijn](https://github.com/HostenMarijn) made their first contribution in [#1918](https://github.com/ivpusic/react-native-image-crop-picker/pull/1918)
+
+### v0.40.3
+
+#### What's Changed
+
+- Make list items accessible by [@v-miibr](https://github.com/v-miibr) in [#1439](https://github.com/ivpusic/react-native-image-crop-picker/pull/1439)
+
+#### New Contributors
+
+- [@v-miibr](https://github.com/v-miibr) made their first contribution in [#1439](https://github.com/ivpusic/react-native-image-crop-picker/pull/1439)

package/harmony/image_crop_picker/index.ets

@@ -5,4 +5,5 @@
  */
 
 export { ImageEditInfo } from "./src/main/ets/pages/ImageEditInfo"
+export { CircleImageInfo } from "./src/main/ets/pages/CircleImageInfo"
 export * from "./ts";

package/harmony/image_crop_picker/oh-package.json5

@@ -3,7 +3,7 @@
   "description": "Please describe the basic information.",
   "main": "index.ets",
   "type": "module",
-  "version": "0.50.2-rc.3",
+  "version": "0.50.2-rc.5",
   "dependencies": {
     "@rnoh/react-native-openharmony": "file:../../node_modules/@react-native-oh/react-native-harmony/harmony/react_native_openharmony.har"
   },

package/harmony/image_crop_picker/src/main/ets/ImageCropPickerTurboModule.ts

@@ -443,8 +443,8 @@ export class ImageCropPickerTurboModule extends TurboModule implements ImageCrop
       results.size = length;
       results.creationDate = stat.ctime + '';
       results.modificationDate = stat.mtime + '';
-      results.path = this.isNullOrUndefined(tempFilePaths) ? null : filePrefix + value;
       if (this.isImage(value)) {
+        results.path = this.isNullOrUndefined(tempFilePaths) ? null : filePrefix + value;
         results.data = includeBase64 ? this.imageToBase64(value) : null;
         results.mime = 'image/' + imageType;
         Logger.info(`${TAG} into openPickerResult value : ${value}`);
@@ -463,6 +463,12 @@ export class ImageCropPickerTurboModule extends TurboModule implements ImageCrop
         results.duration = null;
       } else {
         Logger.info(`${TAG} into getPickerResult video start`);
+        let qualityNumber = this.isNullOrUndefined(options.compressImageQuality) ? ImageQuality : options.compressImageQuality;
+        if(qualityNumber !== 1){
+          results.path = this.isNullOrUndefined(tempFilePaths) ? null : value;
+        } else {
+          results.path = this.isNullOrUndefined(tempFilePaths) ? null : filePrefix + value;
+        }
         results.data = null;
         results.mime = 'video/' + imageType;
         let url = 'fd://' + file.fd;
@@ -919,6 +925,7 @@ export class ImageCropPickerTurboModule extends TurboModule implements ImageCrop
       const showCropGuidelines: boolean = this.isNullOrUndefined(options?.showCropGuidelines) ? true : options?.showCropGuidelines;
       const showCropFrame: boolean = this.isNullOrUndefined(options?.showCropFrame) ? true : options?.showCropFrame;
       const freeStyleCropEnabled: boolean = this.isNullOrUndefined(options?.freeStyleCropEnabled) ? false : options?.freeStyleCropEnabled;
+      const cropperCircleOverlay: boolean = this.isNullOrUndefined(options?.cropperCircleOverlay) ? false : options?.cropperCircleOverlay;
       const cropperRotate: string = options?.cropperRotateButtonsHidden + '';
       AppStorage.setOrCreate('initWidth', initWidth);
       AppStorage.setOrCreate('initHeight', initHeight);
@@ -932,6 +939,7 @@ export class ImageCropPickerTurboModule extends TurboModule implements ImageCrop
       AppStorage.setOrCreate('showCropGuidelines', showCropGuidelines);
       AppStorage.setOrCreate('showCropFrame', showCropFrame);
       AppStorage.setOrCreate('freeStyleCropEnabled', freeStyleCropEnabled);
+      AppStorage.setOrCreate('cropperCircleOverlay', cropperCircleOverlay);
 
       try {
         let want: Want = {

package/harmony/image_crop_picker/src/main/ets/pages/CircleImageInfo.ets

@@ -0,0 +1,789 @@
+import { image } from '@kit.ImageKit';
+import Matrix4 from '@ohos.matrix4'
+import fs from '@ohos.file.fs';
+import router from '@ohos.router';
+import display from '@ohos.display';
+import { Constants } from '../utils/Constants';
+import { getPixelMap } from '../utils/DecodeAndEncodeUtil';
+import { RotateType } from '../viewmodel/viewAndModel';
+import { encodeToPng } from '../utils/EncodeUtil';
+import Logger from '../Logger';
+import { CircleImageProcessor } from '../utils/CircleImageProcessor';
+
+const TAG: string = 'CircleImageEditInfo';
+
+@Extend(Row)
+function bottomIconStyle() {
+  .size({ width: '20%', height: '100%' })
+  .justifyContent(FlexAlign.Center)
+}
+
+@Extend(Text)
+function textStyle() {
+  .size({ width: '20%', height: '100%' })
+  .textAlign(TextAlign.Center)
+}
+
+@Extend(Image)
+function iconStyle() {
+  .size({ width: 24, height: 24 })
+  .fillColor('#FFFFFF')
+  .opacity(0.9)
+}
+
+@Component
+export struct CropView {
+  @StorageProp('filePath') filePath: string = '';
+  @StorageProp('cropperRotate') cropperRotate: string = '';
+  @StorageProp('initWidth') initWidth: number = 0;
+  @StorageProp('initHeight') initHeight: number = 0;
+  @StorageProp('textTitle') title: string = '';
+  @StorageProp('cancelText') cancel: string = '';
+  @StorageProp('cancelTextColor') cancelTextColor: string = '';
+  @StorageProp('chooseText') choose: string = '';
+  @StorageProp('chooseTextColor') chooseTextColor: string = '';
+  @StorageProp('freeStyleCropEnabled') freeStyleCropEnabled: boolean = false;
+  @StorageProp('cropperCircleOverlay') cropperCircleOverlay: boolean = false;
+  @StorageProp('enableRotationGesture') enableRotationGesture: boolean = false;
+  @State private model: CropModel = new CropModel();
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  @State pm: PixelMap | undefined = undefined;
+  @State private matrix: object = Matrix4.identity()
+    .translate({ x: 0, y: 0 })
+    .scale({ x: this.model.scale, y: this.model.scale });
+  @State screenWidth: number = 0;
+  @State screenHeight: number = 0;
+  @State imageWidth: number = 0;
+  @State imageHeight: number = 0;
+  @State angle: number = 0;
+  @State gestureAngle: number = 0
+  private tempScale = 1;
+  private startOffsetX: number = 0;
+  private startOffsetY: number = 0;
+  private initialAngle: number = 0;
+  private initialScale: number = 1;
+  private initialOffsetX: number = 0;
+  private initialOffsetY: number = 0;
+  private initialImageWidth: number = 0;
+  private initialImageHeight: number = 0;
+  private isImageAnimation: boolean = true
+  private isStackAnimation: boolean = true
+  @StorageProp('bottomRectHeight')
+  bottomRectHeight: number = 0;
+  @StorageProp('topRectHeight')
+  topRectHeight: number = 0;
+
+  aboutToAppear(): void {
+    this.screenHeight = this.getUIContext().px2vp(display.getDefaultDisplaySync().height);
+    this.filePath = AppStorage.Get('filePath') || ''
+    this.model.setImage(this.filePath)
+    getPixelMap(this.filePath)
+      .then((pixelMap: image.PixelMap) => {
+        if (pixelMap) {
+          this.model.src = pixelMap;
+          pixelMap.getImageInfo().then((imageInfo) => {
+            this.imageHeight = imageInfo.size == undefined ? 0 : imageInfo.size?.height;
+            this.imageWidth = imageInfo.size == undefined ? 0 : imageInfo.size?.width;
+            this.initialImageWidth = this.imageWidth;
+            this.initialImageHeight = this.imageHeight;
+          })
+        }
+      })
+  }
+
+  @Builder
+  CropTitleBar() {
+    Text(this.title)
+      .fontColor(Color.White)
+      .fontSize(20)
+      .textAlign(TextAlign.Center)
+      .width('100%')
+      .height(46)
+      .position({ x: 0, y: 20 })
+      .backgroundColor(Color.Black)
+  }
+
+  @Builder
+  BottomToolbar() {
+    Row() {
+      Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center }) {
+        Text(this.cancel)
+          .textStyle()
+          .fontColor(this.cancelTextColor)
+          .onClick(async () => {
+            router.back()
+          });
+        Row() {
+          Image($r('app.media.ic_anti_clockwise'))
+            .iconStyle()
+            .visibility(this.cropperRotate === 'true' ? Visibility.Hidden : Visibility.Visible)
+            .onClick(async () => {
+              this.rotateImage(RotateType.ANTI_CLOCK);
+            });
+        }
+        .bottomIconStyle();
+
+        Row() {
+          Image($r('app.media.ic_reset'))
+            .iconStyle()
+            .onClick(() => {
+              this.resetAllTransformations();
+            });
+        }
+        .bottomIconStyle();
+
+        Row() {
+          Image($r('app.media.ic_clockwise'))
+            .iconStyle()
+            .visibility(this.cropperRotate === 'true' ? Visibility.Hidden : Visibility.Visible)
+            .onClick(() => {
+              this.rotateImage(RotateType.CLOCKWISE);
+            });
+        }
+        .bottomIconStyle();
+
+        Text(this.choose)
+          .textStyle()
+          .fontColor(this.chooseTextColor)
+          .onClick(async () => {
+            if (this.model.src) {
+              try {
+                // 进行普通的正方形裁剪
+                const squarePm = await this.model.crop(image.PixelMapFormat.RGBA_8888);
+
+                // 对裁剪后的图片应用旋转
+                const normalizedAngle = ((this.angle % 360) + 360) % 360;
+                if (normalizedAngle !== 0) {
+                  await squarePm.rotate(normalizedAngle);
+                }
+
+                // 转换为真正的圆形图片
+                const circlePm = await CircleImageProcessor.createTrueCircleImage(squarePm);
+
+                // 保存为PNG格式（支持透明度）
+                let imgPath = await encodeToPng(this, circlePm);
+
+                // 清理资源
+                squarePm.release();
+                circlePm.release();
+
+                // 保存路径
+                AppStorage.setOrCreate('cropImagePath', imgPath);
+                AppStorage.setOrCreate('isCircleImage', true);
+                router.back()
+              } catch (error) {
+                Logger.error(TAG, "Circle crop failed:" + JSON.stringify(error));
+              }
+            }
+          })
+      }
+      .width('100%')
+      .height(56)
+      .backgroundColor(Color.Black)
+      .margin({ bottom: 30 })
+    }
+    .width('100%')
+    .height(56)
+    .position({ x: 0, y: (this.screenHeight - 66) })
+    .backgroundColor(Color.Black)
+  }
+
+  build() {
+    Stack() {
+      Stack() {
+        Image(this.model.path)
+          .width('100%')
+          .height('100%')
+          .alt(this.model.previewSource)
+          .objectFit(ImageFit.Contain)
+          .transform(this.matrix)
+          .animation({ duration: this.isImageAnimation ? 300 : 0 })
+          .onComplete((msg) => {
+            if (msg) {
+              // 图片加载成功
+              this.model.imageWidth = msg.width;
+              this.model.imageHeight = msg.height;
+              this.model.componentWidth = msg.componentWidth;
+              this.model.componentHeight = msg.componentHeight;
+              this.saveInitialState();
+              this.checkImageAdapt();
+              if (this.model.imageLoadEventListener != null && msg.loadingStatus == 1) {
+                this.model.imageLoadEventListener.onImageLoaded(msg);
+              }
+            }
+          })
+          .onError((error) => {
+            if (this.model.imageLoadEventListener != null) {
+              this.model.imageLoadEventListener.onImageLoadError(error);
+            }
+          })
+      }
+      .rotate({ angle: this.angle })
+      .width('100%')
+      .height('100%')
+      .animation({ duration: this.isStackAnimation ? 300 : 0 })
+      .priorityGesture(
+        TapGesture({ count: 2, fingers: 1 })
+          .onAction((event: GestureEvent) => {
+            if (!event) {
+              return
+            }
+            if (this.model.zoomEnabled) {
+              if (this.model.scale != 1) {
+                this.model.scale = 1;
+                this.updateMatrix();
+              } else {
+                this.zoomTo(2);
+              }
+            }
+
+            this.checkImageAdapt();
+          })
+      )
+      .gesture(
+        GestureGroup(GestureMode.Parallel,
+          // 拖动手势
+          PanGesture({})
+            .onActionStart(() => {
+              Logger.info(TAG, "CropView Pan gesture start");
+              this.startOffsetX = this.model.offsetX;
+              this.startOffsetY = this.model.offsetY;
+              this.isImageAnimation = false
+            })
+            .onActionUpdate((event: GestureEvent) => {
+              Logger.info(TAG, "CropView Pan gesture update" + JSON.stringify(event));
+              if (event) {
+                if (this.model.panEnabled) {
+                  let distanceX: number = this.startOffsetX + vp2px(event.offsetX) / this.model.scale;
+                  let distanceY: number = this.startOffsetY + vp2px(event.offsetY) / this.model.scale;
+                  this.model.offsetX = distanceX;
+                  this.model.offsetY = distanceY;
+                  this.updateMatrix()
+                }
+              }
+            })
+            .onActionEnd(() => {
+              Logger.info(TAG, "CropView Pan gesture end");
+              this.checkImageAdapt();
+              this.isImageAnimation = true
+            }),
+          // 缩放手势
+          PinchGesture({ fingers: 2 })
+            .onActionStart(() => {
+              this.isStackAnimation = false
+              this.tempScale = this.model.scale
+            })
+            .onActionUpdate((event) => {
+              if (event) {
+                if (!this.model.zoomEnabled) {
+                  return;
+                }
+                this.zoomTo(Math.min(5.0, Math.max(0.1, (this.tempScale * event.scale))))
+              }
+            })
+            .onActionEnd((event) => {
+              this.checkImageAdapt()
+              this.updateMatrix()
+              this.isStackAnimation = true
+            }),
+          //旋转手势
+          RotationGesture({})
+            .onActionStart(() => {
+              if (this.enableRotationGesture) {
+                // 记录手势起始
+                this.gestureAngle = this.angle
+                // 关闭动画避免旋转错误
+                this.isStackAnimation = false
+              }
+            })
+            .onActionUpdate((event: GestureEvent) => {
+              if (this.enableRotationGesture) {
+                let normalizedAngle = event.angle
+                if (normalizedAngle < 0) {
+                  normalizedAngle += 360
+                }
+                this.angle = this.gestureAngle + normalizedAngle
+              }
+            })
+            .onActionEnd(() => {
+              if (this.enableRotationGesture) {
+                this.isStackAnimation = false
+                const tmp = this.angle % 360
+                this.angle = tmp
+                let time = setTimeout(() => {
+                  this.isStackAnimation = true
+                  this.angle = closestAngle
+                  this.updateMatrix()
+                  this.checkImageAdapt()
+                  clearTimeout(time)
+                }, 50)
+
+                // 计算最近的吸附角度
+                const snapAngles = [0, 90, 180, 270, 360]
+                let closestAngle = snapAngles[0]
+                let minDiff = Infinity
+
+                for (const snapAngle of snapAngles) {
+                  const diff = Math.abs(tmp - snapAngle)
+                  if (diff < minDiff) {
+                    minDiff = diff
+                    closestAngle = snapAngle
+                  }
+                }
+              }
+            })
+        )
+      )
+
+      Canvas(this.context)
+        .width('100%')
+        .height('100%')
+        .backgroundColor(Color.Transparent)
+        .onReady(() => {
+          if (this.context == null) {
+            return
+          }
+          let height = this.context.height
+          let width = this.context.width
+          this.context.fillStyle = this.model.maskColor;
+          this.context.fillRect(0, 0, width, height)
+          let centerX = width / 2;
+          let centerY = height / 2;
+          this.context.globalCompositeOperation = 'destination-out'
+          this.context.fillStyle = 'white'
+          let frameWidthInVp = px2vp(this.model.frameWidth);
+          let frameHeightInVp = px2vp(this.model.getFrameHeight());
+          this.context.beginPath();
+          this.context.arc(centerX, centerY, px2vp(this.model.frameWidth / 2), 0, 2 * Math.PI);
+          this.context.fill();
+          this.context.globalCompositeOperation = 'source-over';
+          this.context.strokeStyle = this.model.strokeColor;
+          let radius = Math.min(frameWidthInVp, frameHeightInVp) / 2;
+          this.context.beginPath();
+          this.context.arc(centerX, centerY, radius, 0, 2 * Math.PI);
+          this.context.closePath();
+          this.context.lineWidth = 1;
+          this.context.stroke();
+        })
+        .enabled(false)
+
+      this.CropTitleBar()
+
+      this.BottomToolbar()
+    }
+    .backgroundColor(Color.Black)
+  }
+
+  /**
+   * 检查手势操作后，图片是否填满取景框，没填满则进行调整
+   */
+  private checkImageAdapt() {
+    let offsetX = this.model.offsetX;
+    let offsetY = this.model.offsetY;
+    let scale = this.model.scale;
+    Logger.info(TAG, "CropView offsetX: " + offsetX + ", offsetY: " + offsetY + ", scale: " + scale);
+
+    // 图片适配控件的时候也进行了缩放，计算出这个缩放比例
+    let widthScale = this.model.componentWidth / this.model.imageWidth;
+    let heightScale = this.model.componentHeight / this.model.imageHeight;
+    let adaptScale = Math.min(widthScale, heightScale);
+    Logger.info(TAG,
+      "CropView Image scale: " + adaptScale + "while attaching the component[" + this.model.componentWidth + ", " +
+      this.model.componentHeight);
+
+    // 经过两次缩放(适配控件、手势)后，图片的实际显示大小
+    let showWidth = this.model.imageWidth * adaptScale * this.model.scale;
+    let showHeight = this.model.imageHeight * adaptScale * this.model.scale;
+    let imageX = (this.model.componentWidth - showWidth) / 2;
+    let imageY = (this.model.componentHeight - showHeight) / 2;
+    Logger.info(TAG, "CropView Image left top is: (" + imageX + ", " + imageY + ")");
+
+    // 取景框的左上角坐标
+    let frameX = (this.model.componentWidth - this.model.frameWidth) / 2;
+    let frameY = (this.model.componentHeight - this.model.getFrameHeight()) / 2;
+
+    // 图片左上角坐标
+    let showX = imageX + offsetX * scale;
+    let showY = imageY + offsetY * scale;
+    Logger.info(TAG, "CropView Image show at (" + showX + ", " + showY + ")");
+
+    if (this.model.frameWidth > showWidth || this.model.getFrameHeight() > showHeight) { // 图片缩放后，大小不足以填满取景框
+      let xScale = this.model.frameWidth / showWidth;
+      let yScale = this.model.getFrameHeight() / showHeight;
+      let newScale = Math.max(xScale, yScale);
+      this.model.scale = this.model.scale * newScale;
+      showX *= newScale;
+      showY *= newScale;
+    }
+
+    // 调整x轴方向位置，使图像填满取景框
+    if (showX > frameX) {
+      showX = frameX;
+    } else if (showX + showWidth < frameX + this.model.frameWidth) {
+      showX = frameX + this.model.frameWidth - showWidth;
+    }
+    // 调整y轴方向位置，使图像填满取景框
+    if (showY > frameY) {
+      showY = frameY;
+    } else if (showY + showHeight < frameY + this.model.getFrameHeight()) {
+      showY = frameY + this.model.getFrameHeight() - showHeight;
+    }
+    this.model.offsetX = (showX - imageX) / scale;
+    this.model.offsetY = (showY - imageY) / scale;
+    this.updateMatrix();
+  }
+
+  public zoomTo(scale: number): void {
+    this.model.scale = scale;
+    this.updateMatrix();
+  }
+
+  public updateMatrix(): void {
+    this.matrix = Matrix4.identity()
+      .translate({ x: this.model.offsetX, y: this.model.offsetY })
+      .scale({ x: this.model.scale, y: this.model.scale })
+  }
+
+  public rotateImage(rotateType: RotateType) {
+    Logger.info(TAG, "into rotateImage rotateType : " + rotateType)
+    if (rotateType === RotateType.CLOCKWISE) {
+      if (!this.model.src) {
+        Logger.info(TAG, "into rotateImage return")
+        return;
+      }
+      try {
+        this.model.src.rotate(Constants.CLOCK_WISE)
+          .then(() => {
+            this.angle = this.angle + Constants.CLOCK_WISE;
+            Logger.info(TAG, `into rotateImage  Constants.CLOCK_WISE return ${this.angle}`,)
+          })
+      } catch (error) {
+      }
+    }
+    if (rotateType === RotateType.ANTI_CLOCK) {
+      if (!this.model.src) {
+        Logger.info(TAG, "into rotateImage return")
+        return;
+      }
+      try {
+        this.model.src.rotate(Constants.ANTI_CLOCK)
+          .then(() => {
+            this.angle = this.angle + Constants.ANTI_CLOCK;
+            Logger.info(TAG, `into rotateImage Constants.ANTI_CLOCK return ${this.angle}`,)
+          })
+      } catch (error) {
+      }
+    }
+  }
+
+  // 保存初始状态方法
+  private saveInitialState(): void {
+    this.initialAngle = this.angle;
+    this.initialScale = this.model.scale;
+    this.initialOffsetX = this.model.offsetX;
+    this.initialOffsetY = this.model.offsetY;
+    Logger.info(TAG, "Initial state saved: " +
+      `angle=${this.initialAngle}, scale=${this.initialScale}, offsetX=${this.initialOffsetX}, offsetY=${this.initialOffsetY}`);
+  }
+
+  // 重置所有变换的方法
+  private resetAllTransformations(): void {
+    Logger.info(TAG, "Resetting all transformations...");
+
+    // 重置位置和缩放
+    this.model.scale = this.initialScale;
+    this.model.offsetX = this.initialOffsetX;
+    this.model.offsetY = this.initialOffsetY;
+
+    // 重置旋转角度
+    if (this.angle !== this.initialAngle) {
+      let angleDifference = this.initialAngle - this.angle;
+
+      // 如果有PixelMap且需要旋转
+      if (this.model.src && angleDifference !== 0) {
+        angleDifference = angleDifference % 360
+        // 异步旋转图片
+        this.model.src.rotate(angleDifference)
+          .then(() => {
+            this.angle = this.initialAngle;
+            Logger.info(TAG, `Image rotated back by ${angleDifference} degrees`);
+            this.updateMatrix();
+            this.checkImageAdapt();
+          })
+          .catch((error: Error) => {
+            Logger.error(TAG, "Failed to reset rotation: " + JSON.stringify(error));
+            // 即使旋转失败，也更新UI状态
+            this.angle = this.initialAngle;
+            this.updateMatrix();
+            this.checkImageAdapt();
+          });
+      } else {
+        // 无需旋转或没有PixelMap，直接更新
+        this.angle = this.initialAngle;
+        this.updateMatrix();
+        this.checkImageAdapt();
+      }
+    } else {
+      // 角度相同，直接更新
+      this.updateMatrix();
+      this.checkImageAdapt();
+    }
+
+    // 重置图片宽高到初始值
+    if (this.imageWidth !== this.initialImageWidth || this.imageHeight !== this.initialImageHeight) {
+      this.imageWidth = this.initialImageWidth;
+      this.imageHeight = this.initialImageHeight;
+    }
+
+    Logger.info(TAG, "All transformations have been reset: " +
+      `angle=${this.angle}, scale=${this.model.scale}, offsetX=${this.model.offsetX}, offsetY=${this.model.offsetY}`);
+  }
+}
+
+interface ImageLoadedEvent {
+  width: number;
+  height: number;
+  componentWidth: number;
+  componentHeight: number;
+  loadingStatus: number;
+  contentWidth: number;
+  contentHeight: number;
+  contentOffsetX: number;
+  contentOffsetY: number;
+}
+
+export interface ImageLoadEventListener {
+
+  onImageLoaded(msg: ImageLoadedEvent): void;
+
+  onImageLoadError(error: ImageError): void;
+}
+
+export class CropModel {
+  /**
+   * PixelMap图片对象
+   *
+   */
+  src?: image.PixelMap = undefined;
+  /**
+   * 图片地址
+   */
+  path: string = '';
+  /**
+   * 图片预览
+   */
+  previewSource: string | Resource = '';
+  /**
+   * 是否可以拖动
+   */
+  panEnabled: boolean = true;
+  /**
+   * 是否可以缩放
+   */
+  zoomEnabled: boolean = true;
+  /**
+   * 取景框宽度
+   */
+  frameWidth = 1000;
+  /**
+   * 取景框宽高比
+   */
+  frameRatio = 1;
+  /**
+   * 遮罩颜色
+   */
+  maskColor: string = '#AA000000';
+  /**
+   * 取景框边框颜色
+   */
+  strokeColor: string = '#FFFFFF';
+  /**
+   * 图片加载监听
+   */
+  imageLoadEventListener: ImageLoadEventListener | null = null;
+  /**
+   * 图片宽度
+   */
+  imageWidth: number = 0;
+  /**
+   * 图片高度
+   */
+  imageHeight: number = 0;
+  /**
+   * 控件宽度
+   */
+  componentWidth: number = 0;
+  /**
+   * 控件高度
+   */
+  componentHeight: number = 0;
+  /**
+   * 手势缩放比例
+   */
+  scale: number = 1;
+  /**
+   * x轴方向偏移量
+   */
+  offsetX: number = 0;
+  /**
+   * y轴方向偏移量
+   */
+  offsetY: number = 0;
+
+  public setImage(path: string, previewSource?: string | Resource): CropModel {
+    this.path = path;
+    if (!!previewSource) {
+      this.previewSource = previewSource;
+    }
+    return this;
+  }
+
+  public setScale(scale: number): CropModel {
+    this.scale = scale;
+    return this;
+  }
+
+  public isPanEnabled(): boolean {
+    return this.panEnabled;
+  }
+
+  public setPanEnabled(panEnabled: boolean): CropModel {
+    this.panEnabled = panEnabled;
+    return this;
+  }
+
+  public setZoomEnabled(zoomEnabled: boolean): CropModel {
+    this.zoomEnabled = zoomEnabled;
+    return this;
+  }
+
+  public setFrameWidth(frameWidth: number): CropModel {
+    this.frameWidth = frameWidth;
+    return this;
+  }
+
+  public setFrameRatio(frameRatio: number): CropModel {
+    this.frameRatio = frameRatio;
+    return this;
+  }
+
+  public setMaskColor(color: string): CropModel {
+    this.maskColor = color;
+    return this;
+  }
+
+  public setStrokeColor(color: string): CropModel {
+    this.strokeColor = color;
+    return this;
+  }
+
+  public setImageLoadEventListener(listener: ImageLoadEventListener): CropModel {
+    this.imageLoadEventListener = listener;
+    return this;
+  }
+
+  public getScale(): number {
+    return this.scale;
+  }
+
+  public isZoomEnabled(): boolean {
+    return this.zoomEnabled;
+  }
+
+  public getImageWidth(): number {
+    return this.imageWidth;
+  }
+
+  public getImageHeight(): number {
+    return this.imageHeight;
+  }
+
+  public getFrameHeight() {
+    return this.frameWidth / this.frameRatio;
+  }
+
+  public reset(): void {
+    this.scale = 1;
+    this.offsetX = 0;
+    this.offsetY = 0;
+  }
+
+  public async crop(format: image.PixelMapFormat): Promise<image.PixelMap> {
+
+    if (!this.path || this.path == '') {
+      throw new Error('Please set path first');
+    }
+    if (this.imageWidth == 0 || this.imageHeight == 0) {
+      throw new Error('The image is not loaded');
+    }
+
+    // 图片适配控件的时候也进行了缩放，计算出这个缩放比例
+    let widthScale = this.componentWidth / this.imageWidth;
+    let heightScale = this.componentHeight / this.imageHeight;
+    let adaptScale = Math.min(widthScale, heightScale);
+
+    // 经过两次缩放(适配控件、手势)后，图片的实际显示大小
+    let totalScale = adaptScale * this.scale;
+    let showWidth = this.imageWidth * totalScale;
+    let showHeight = this.imageHeight * totalScale;
+    let imageX = (this.componentWidth - showWidth) / 2;
+    let imageY = (this.componentHeight - showHeight) / 2;
+
+    // 取景框的左上角坐标
+    let frameX = (this.componentWidth - this.frameWidth) / 2;
+    let frameY = (this.componentHeight - this.getFrameHeight()) / 2;
+
+    // 图片左上角坐标
+    let showX = imageX + this.offsetX * this.scale;
+    let showY = imageY + this.offsetY * this.scale;
+
+    let x = (frameX - showX) / totalScale;
+    let y = (frameY - showY) / totalScale;
+    let file = fs.openSync(this.path, fs.OpenMode.READ_ONLY)
+    let imageSource: image.ImageSource = image.createImageSource(file.fd);
+    let decodingOptions: image.DecodingOptions = {
+      editable: true,
+      desiredPixelFormat: image.PixelMapFormat.BGRA_8888,
+    }
+
+    // 创建pixelMap
+    let pm = await imageSource.createPixelMap(decodingOptions);
+    let cp = await this.copyPixelMap(pm);
+    pm.release();
+    let region: image.Region =
+      { x: x, y: y, size: { width: this.frameWidth / totalScale, height: this.getFrameHeight() / totalScale } };
+    cp.cropSync(region);
+    return cp;
+  }
+
+  async copyPixelMap(pm: PixelMap): Promise<PixelMap> {
+    const imageInfo: image.ImageInfo = await pm.getImageInfo();
+    const buffer: ArrayBuffer = new ArrayBuffer(pm.getPixelBytesNumber());
+    await pm.readPixelsToBuffer(buffer);
+    const opts: image.InitializationOptions = {
+      editable: true,
+      pixelFormat: image.PixelMapFormat.RGBA_8888,
+      size: { height: imageInfo.size.height, width: imageInfo.size.width }
+    };
+    return image.createPixelMap(buffer, opts);
+  }
+}
+
+@Entry
+@Component
+export struct CircleImageInfo {
+  @State private model: CropModel = new CropModel();
+
+  build() {
+    Column() {
+      CropView({
+        model: this.model,
+      })
+        .layoutWeight(1)
+        .width('100%')
+    }
+    .height('100%')
+    .width('100%')
+  }
+}

package/harmony/image_crop_picker/src/main/ets/utils/CircleImageProcessor.ets

@@ -0,0 +1,125 @@
+import { image } from '@kit.ImageKit';
+import util from '@ohos.util';
+
+export class CircleImageProcessor {
+
+  /**
+   * 将正方形图片转换为真正的圆形图片（带透明背景）
+   */
+  static async createTrueCircleImage(squarePm: PixelMap): Promise<PixelMap> {
+    const info = await squarePm.getImageInfo();
+    const size = Math.min(info.size.width, info.size.height);
+
+    console.info(`Creating true circle image, size: ${size}x${size}`);
+
+    // 1. 读取原始像素（BGRA格式）
+    const originalBuffer = new ArrayBuffer(squarePm.getPixelBytesNumber());
+    await squarePm.readPixelsToBuffer(originalBuffer);
+    const originalPixels = new Uint8ClampedArray(originalBuffer);
+
+    // 2. 创建新的RGBA像素数组（支持透明度）
+    const pixelBuffer = new Uint8ClampedArray(size * size * 4);
+
+    const radius = size / 2;
+    const centerX = radius;
+    const centerY = radius;
+    const radiusSq = radius * radius;
+
+    // 3. 遍历每个像素，创建圆形遮罩
+    for (let y = 0; y < size; y++) {
+      for (let x = 0; x < size; x++) {
+        const dx = x - centerX;
+        const dy = y - centerY;
+        const distSq = dx * dx + dy * dy;
+
+        const srcIdx = (y * size + x) * 4;
+        const dstIdx = (y * size + x) * 4;
+
+        if (distSq <= radiusSq) {
+          // 圆形区域内：复制像素并转换 BGRA -> RGBA
+          // 同时进行抗锯齿处理（边缘半透明）
+          const distance = Math.sqrt(distSq);
+          let alpha = 255; // 完全不透明
+
+          // 边缘抗锯齿：距离半径3像素内的区域逐渐透明
+          if (distance > radius - 3) {
+            const edgeDistance = radius - distance;
+            alpha = Math.max(0, Math.min(255, Math.floor((edgeDistance / 3) * 255)));
+          }
+
+          pixelBuffer[dstIdx] = originalPixels[srcIdx + 2];     // R
+          pixelBuffer[dstIdx + 1] = originalPixels[srcIdx + 1]; // G
+          pixelBuffer[dstIdx + 2] = originalPixels[srcIdx];     // B
+          pixelBuffer[dstIdx + 3] = alpha;                      // A（带抗锯齿）
+        } else {
+          // 圆形区域外：完全透明
+          pixelBuffer[dstIdx] = 0;     // R
+          pixelBuffer[dstIdx + 1] = 0; // G
+          pixelBuffer[dstIdx + 2] = 0; // B
+          pixelBuffer[dstIdx + 3] = 0; // A（完全透明）
+        }
+      }
+    }
+
+    // 4. 创建新的PixelMap（RGBA_8888支持透明度）
+    const opts: image.InitializationOptions = {
+      editable: true,
+      pixelFormat: image.PixelMapFormat.RGBA_8888,
+      size: { height: size, width: size },
+      alphaType: image.AlphaType.PREMUL // 预乘alpha，透明度效果更好
+    };
+
+    console.info('Circle image created successfully');
+    return await image.createPixelMap(pixelBuffer.buffer, opts);
+  }
+
+  /**
+   * 从矩形图片创建圆形图片
+   */
+  static async cropAndCreateCircle(sourcePm: PixelMap, cropRegion: image.Region): Promise<PixelMap> {
+    // 1. 先裁剪为正方形
+    const squarePm = await CircleImageProcessor.cropToSquare(sourcePm, cropRegion);
+
+    // 2. 转换为圆形
+    const circlePm = await CircleImageProcessor.createTrueCircleImage(squarePm);
+
+    // 3. 清理临时资源
+    squarePm.release();
+
+    return circlePm;
+  }
+
+  /**
+   * 裁剪为正方形
+   */
+  private static async cropToSquare(sourcePm: PixelMap, region: image.Region): Promise<PixelMap> {
+    // 确保是正方形区域
+    const squareSize = Math.min(region.size.width, region.size.height);
+    const squareRegion: image.Region = {
+      x: region.x + (region.size.width - squareSize) / 2,
+      y: region.y + (region.size.height - squareSize) / 2,
+      size: { width: squareSize, height: squareSize }
+    };
+
+    // 深拷贝PixelMap然后裁剪
+    const copyPm = await CircleImageProcessor.copyPixelMap(sourcePm);
+    copyPm.cropSync(squareRegion);
+    return copyPm;
+  }
+
+  /**
+   * 深拷贝PixelMap
+   */
+  private static async copyPixelMap(pm: PixelMap): Promise<PixelMap> {
+    const imageInfo: image.ImageInfo = await pm.getImageInfo();
+    const buffer: ArrayBuffer = new ArrayBuffer(pm.getPixelBytesNumber());
+    await pm.readPixelsToBuffer(buffer);
+
+    const opts: image.InitializationOptions = {
+      editable: true,
+      pixelFormat: image.PixelMapFormat.BGRA_8888,
+      size: { height: imageInfo.size.height, width: imageInfo.size.width }
+    };
+    return image.createPixelMap(buffer, opts);
+  }
+}

package/harmony/image_crop_picker/src/main/ets/utils/Constants.ets

@@ -31,4 +31,8 @@ export class Constants {
   static readonly IMAGE_FORMAT: string = '.jpg'
   static readonly IMAGE_PREFIX: string = 'image';
   static readonly ENCODE_FILE_PERMISSION: string = 'rw'
+
+  // 添加png支持
+  static readonly ENCODE_FORMAT_PNG: string = 'image/png'
+  static readonly IMAGE_FORMAT_PNG: string = '.png'
 }

package/harmony/image_crop_picker/src/main/ets/utils/EncodeUtil.ets

@@ -50,4 +50,25 @@ export async function encode(component: Object, pixelMap: ESObject) : Promise<st
   fs.closeSync(newFile.fd);
   imagePackerApi.release();
   return imgPath;
+}
+
+// PNG编码函数
+export async function encodeToPng(component: Object, pixelMap: ESObject): Promise<string> {
+  let imgPath: string = ''
+  const newPixelMap: ESObject = pixelMap
+  const imagePackerApi = image.createImagePacker()
+  const packOptions: image.PackingOption = {
+    format: Constants.ENCODE_FORMAT_PNG, // 使用PNG格式
+    quality: 100 // PNG质量参数可能无效，但保留
+  }
+  let packerData = await imagePackerApi.packing(newPixelMap, packOptions)
+  Logger.info(TAG, 'into PNG encode data size: ' + packerData.byteLength)
+  const context = getContext(component)
+  imgPath = context.tempDir + '/circle_image_' + util.generateRandomUUID(true) + Constants.IMAGE_FORMAT_PNG
+  let newFile = fs.openSync(imgPath, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE)
+  const number = fs.writeSync(newFile.fd, packerData)
+  Logger.info(TAG, 'PNG file saved: ' + imgPath + ', size: ' + number)
+  fs.closeSync(newFile.fd)
+  imagePackerApi.release()
+  return imgPath
 }

package/harmony/image_crop_picker/src/main/resources/base/profile/main_pages.json

@@ -1,5 +1,6 @@
 {
   "src": [
-    "pages/ImageEditInfo"
+    "pages/ImageEditInfo",
+    "pages/CircleImageInfo"
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@react-native-ohos/react-native-image-crop-picker",
-	"version": "0.50.2-rc.3",
+	"version": "0.50.2-rc.5",
 	"description": "Select single or multiple images, with cropping option",
 	"main": "js/index.js",
 	"scripts": {