@react-native-ohos/react-native-image-crop-picker 0.51.2-rc.2 → 0.51.2-rc.4

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ## 鸿蒙化Log
 
+### v0.51.2-rc.4
+
+- Fix: Support for multiple image formats in image compression. Fixed issues with openPicker and openCamera where circular cropping of images did not display properly.
+- Fix: Adjust to retain the original format of the image after cropping it.
+- Fix: Address the issue where the image cropping frame cannot be dragged. Optimize the position dragging of the cropping frame to ensure it remains centered and maintains consistent iOS effect.
+- pre-release: @react-native-ohos/react-native-image-crop-picker@0.51.2-rc.4
+
+### v0.51.2-rc.3
+
+- fix: The issue of the PNG image being larger in memory than the one generated with a compression ratio of 0.8 to 1 has been resolved.
+- pre-release: @react-native-ohos/react-native-image-crop-picker@0.51.2-rc.3
+
 ### v0.51.2-rc.2
 
 - fix: When canceling the photo selection, do not display an error prompt on the interface.

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.51.2-rc.2",
+  "version": "0.51.2-rc.4",
   "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

@@ -292,12 +292,12 @@ export class ImageCropPickerTurboModule extends TurboModule implements ImageCrop
       let sourceFilePaths: Array<string> = result.photoUris as Array<string>;
       if (sourceFilePaths.length < MINIMUM_VALUE) {
         return new Promise(async (res, rej) => {
-          rej('sourceFilePaths is empty')
+          Logger.info(`${TAG} sourceFilePaths is empty`);
         })
       }
       let tempFilePaths = null;
       Logger.info(`${TAG} into openPicker tempFilePaths ${JSON.stringify(sourceFilePaths)}`);
-      if (qualityNumber !== 1 || forceJpg) {
+      if (!this.isNullOrUndefined(options.compressImageQuality) || forceJpg) {
         Logger.info(`${TAG} qualityNumber = ${qualityNumber} forceJpg = ${forceJpg}`);
         tempFilePaths = await this.compressPictures(qualityNumber * 100, forceJpg, sourceFilePaths);
       } else {
@@ -465,7 +465,7 @@ export class ImageCropPickerTurboModule extends TurboModule implements ImageCrop
       } else {
         Logger.info(`${TAG} into getPickerResult video start`);
         let qualityNumber = this.isNullOrUndefined(options.compressImageQuality) ? ImageQuality : options.compressImageQuality;
-        if(qualityNumber !== 1){
+        if(!this.isNullOrUndefined(options.compressImageQuality)){
           results.path = this.isNullOrUndefined(tempFilePaths) ? null : value;
         } else {
           results.path = this.isNullOrUndefined(tempFilePaths) ? null : filePrefix + value;
@@ -550,7 +550,13 @@ export class ImageCropPickerTurboModule extends TurboModule implements ImageCrop
         if (isImg) {
           let file = fs.openSync(imgOrVideoPath, fs.OpenMode.READ_ONLY);
           try {
-            let dstPath = this.ctx.uiAbilityContext.tempDir + '/rn_image_crop_picker_lib_temp_' + util.generateRandomUUID(true) + '.jpeg';
+            let i = imgOrVideoPath.lastIndexOf('.');
+            let imageType = '';
+            if (i != -1) {
+              imageType = imgOrVideoPath.substring(i + 1);
+              Logger.info(`${TAG} getTempFilePaths img imageType = ${imageType}`);
+            }
+            let dstPath = this.ctx.uiAbilityContext.tempDir + '/rn_image_crop_picker_lib_temp_' + util.generateRandomUUID(true) + '.' +  imageType;
             fs.copyFileSync(file.fd, dstPath, 0);
             imgOrVideoPath = dstPath;
             Logger.info(`${TAG} into openCamera suc dstPath = ${dstPath}`);
@@ -561,7 +567,7 @@ export class ImageCropPickerTurboModule extends TurboModule implements ImageCrop
         }
         let tempFilePaths = null;
         let sourceFilePaths: Array<string> = [imgOrVideoPath];
-        if (qualityNumber !== 1 || forceJpg) {
+        if (!this.isNullOrUndefined(options.compressImageQuality) || forceJpg) {
           Logger.info(`${TAG} into openCamera qualityNumber = ${qualityNumber} forceJpg = ${forceJpg}`);
           tempFilePaths = await this.compressPictures(qualityNumber * 100, forceJpg, sourceFilePaths);
         } else {
@@ -621,7 +627,7 @@ export class ImageCropPickerTurboModule extends TurboModule implements ImageCrop
         }
       } catch (error) {
         let err = error as BusinessError;
-        rej(JSON.stringify(err));
+        Logger.error(JSON.stringify(err));
       }
     })
   };
@@ -666,7 +672,8 @@ export class ImageCropPickerTurboModule extends TurboModule implements ImageCrop
 
   isImage(filePath: string): boolean {
     Logger.info(`${TAG} into isImage fileName = ${filePath}`);
-    const imageExtensionsRegex = /\.(jpg|jpeg|png|gif|bmp|webp|heic)$/i;
+    const imageExtensionsRegex =
+      /\.(jpg|jpeg|png|gif|bmp|webp|heic|heif|sdr_astc_4x4|sdr_sut_superfast_4x4|hdr_astc_4x4)$/i;
     return imageExtensionsRegex.test(filePath);
   }
 
@@ -691,23 +698,42 @@ export class ImageCropPickerTurboModule extends TurboModule implements ImageCrop
         let imageISs = image.createImageSource(files.fd);
         let imagePMs = await imageISs.createPixelMap();
         let imagePackerApi = await image.createImagePacker();
-        let options: image.PackingOption = {
-          format: 'image/jpeg',
-          quality: quality,
-        };
-        try {
-          let packerData = await imagePackerApi.packing(imagePMs, options);
-          Logger.info(`${TAG} into compressPictures data = ${JSON.stringify(packerData)}`);
-          let dstPath = this.ctx.uiAbilityContext.tempDir + '/rn_image_crop_picker_lib_temp_' + util.generateRandomUUID(true) + '.' + imageType;
+        let jpgToJpeg = (imageType == 'jpg' ? 'jpeg' : imageType);
+        if (imageType == 'bmp') {
+          jpgToJpeg = 'jpeg';
+        }
+        let dstPath =
+          this.ctx.uiAbilityContext.tempDir + '/rn_image_crop_picker_lib_temp_' + util.generateRandomUUID(true) +
+            '.' + imageType;
+        if (imageType == 'gif') {
+          let pixelMapList = await imageISs.createPixelMapList();
+          let options: image.PackingOption = {
+            format: `image/jpeg`,
+            quality: quality,
+          };
+          let packer = image.createImagePacker();
           let newFile = fs.openSync(dstPath, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE);
-          Logger.info(`${TAG} into compressPictures newFile id = ${newFile.fd}`);
+          // 只取第一帧压缩 同时将图片转为jpeg来处理压缩
+          let packerData = await packer.packToData(pixelMapList[0], options);
           const number = fs.writeSync(newFile.fd, packerData);
-          Logger.info(`${TAG} into compressPictures write data to file succeed size = ${number}`);
-          resultImages.push(dstPath);
-          fs.closeSync(files);
-        } catch (err) {
-          Logger.error(`${TAG} into compressPictures write data to file failed err = ${JSON.stringify(err)}`);
+          fs.closeSync(newFile);
+        } else {
+          if(imageType == 'sdr_astc_4x4' || imageType == 'sdr_sut_superfast_4x4'){
+            quality = 92;
+          } else if(imageType == 'hdr_astc_4x4'){
+            quality = 85;
+          }
+          let options: image.PackingOption = {
+            format: `image/${jpgToJpeg}`,
+            quality: quality,
+          };
+          let newFile = fs.openSync(dstPath, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE);
+          let packerData = await imagePackerApi.packToData(imagePMs, options);
+          const number = fs.writeSync(newFile.fd, packerData);
+          fs.closeSync(newFile);
         }
+        resultImages.push(dstPath);
+        fs.closeSync(files);
       } else {
         Logger.info(`${TAG} into compressPictures video srcPath = ${srcPath}`);
         resultImages.push(srcPath);
@@ -804,7 +830,7 @@ export class ImageCropPickerTurboModule extends TurboModule implements ImageCrop
     Logger.info(`${TAG} into openCropper imgPath = ${imgPath}`);
     if (this.isNullOrUndefined(imgPath)) {
       return new Promise(async (res, rej) => {
-        rej('imgPath is null')
+        Logger.info(`${TAG} imgPath is null`);
       })
     }
     let tempFilePaths = null;
@@ -941,6 +967,7 @@ export class ImageCropPickerTurboModule extends TurboModule implements ImageCrop
       AppStorage.setOrCreate('showCropFrame', showCropFrame);
       AppStorage.setOrCreate('freeStyleCropEnabled', freeStyleCropEnabled);
       AppStorage.setOrCreate('cropperCircleOverlay', cropperCircleOverlay);
+
       try {
         let want: Want = {
           "bundleName": bundleName,

package/harmony/image_crop_picker/src/main/ets/generated/turboModules/ImageCropPicker.ts

@@ -5,7 +5,7 @@
 export namespace ImageCropPicker {
   export const NAME = 'ImageCropPicker' as const
 
-  export type CropperOptions = {multiple?: boolean, minFiles?: number, maxFiles?: number, waitAnimationEnd?: boolean, smartAlbums?: unknown[], useFrontCamera?: boolean, loadingLabelText?: string, showsSelectedCount?: boolean, sortOrder?: string, hideBottomControls?: boolean, writeTempFile?: boolean, mediaType: string, width?: number, height?: number, includeBase64?: boolean, includeExif?: boolean, forceJpg?: boolean, cropping?: boolean, avoidEmptySpaceAroundImage?: boolean, cropperActiveWidgetColor?: string, cropperStatusBarColor?: string, cropperToolbarColor?: string, cropperToolbarWidgetColor?: string, cropperToolbarTitle?: string, freeStyleCropEnabled?: boolean, cropperTintColor?: string, cropperCircleOverlay?: boolean, cropperCancelText?: string, cropperCancelColor?: string, cropperChooseText?: string, cropperChooseColor?: string, cropperRotateButtonHidden?: boolean, showCropGuidelines?: boolean, showCropFrame?: boolean, enableRotationGesture?: boolean, disableCropperColorSetters?: boolean, compressImageMaxWidth?: number, compressImageMaxHeight?: number, compressImageQuality?: number, path: string}
+  export type CropperOptions = {multiple?: boolean, minFiles?: number, maxFiles?: number, waitAnimationEnd?: boolean, smartAlbums?: unknown[], useFrontCamera?: boolean, loadingLabelText?: string, showsSelectedCount?: boolean, sortOrder?: string, hideBottomControls?: boolean, writeTempFile?: boolean, mediaType: string, width?: number, height?: number, includeBase64?: boolean, includeExif?: boolean, forceJpg?: boolean, cropping?: boolean, avoidEmptySpaceAroundImage?: boolean, cropperActiveWidgetColor?: string, cropperStatusBarLight?: boolean, cropperNavigationBarLight?: boolean, cropperToolbarColor?: string, cropperToolbarWidgetColor?: string, cropperToolbarTitle?: string, freeStyleCropEnabled?: boolean, cropperTintColor?: string, cropperCircleOverlay?: boolean, cropperCancelText?: string, cropperCancelColor?: string, cropperChooseText?: string, cropperChooseColor?: string, cropperRotateButtonHidden?: boolean, showCropGuidelines?: boolean, showCropFrame?: boolean, enableRotationGesture?: boolean, disableCropperColorSetters?: boolean, compressImageMaxWidth?: number, compressImageMaxHeight?: number, compressImageQuality?: number, path: string}
   
   export type Exif = {}
   

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

@@ -192,7 +192,7 @@ export struct CropView {
   build() {
     Stack() {
       Stack() {
-        Image(this.model.path)
+        Image(this.model.src)
           .width('100%')
           .height('100%')
           .alt(this.model.previewSource)