chooyan-eng / crop_your_image

A flutter plugin which provides Crop Widget for cropping images.
https://pub.dev/packages/crop_your_image
Apache License 2.0
163 stars 139 forks source link

How can I ensure that the image ratio is 1:1 when entering the page? #162

Open yvone1991 opened 2 months ago

yvone1991 commented 2 months ago

I am using the situation where the background moves and the screenshot area is fixed. However, every time I enter, the image is defaulted to be enlarged. I have tried various configurations but cannot load the image in a 1:1 ratio. I hope that the image is in a fitwidth or fitheight mode to fill one side of a physical screen. Then the screenshot rectangle is at the center of this image as the initial state when opening the page. But now every time I open it, the image is enlarged. How should this be modified?

I hope the effect when entering the page is like this: Screenshot_20240911_105806

But,Now the effect when entering the page is like this: Screenshot_20240911_105745

  Widget _buildBody(BuildContext context) {
    return FutureBuilder<Uint8List>(
      future: _chooseAssets != null ? _loadImage(_chooseAssets!) : null,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Container(
            color: ColorConfig.color12091C,
            child: const Center(
              child: CircularProgressIndicator(color: Colors.white),
            ),
          );
        } else if (snapshot.hasError) {
          return Center(child: Text(S.current.loadImageError));
        } else if (snapshot.hasData) {
          final imageData = snapshot.data!;
          return Stack(
            children: [
              Crop(
                image: imageData,
                willUpdateScale: (scale) {
                  return scale < 5;
                },
                initialSize: 1.0,
                initialRectBuilder: (rect, rect2) {
                  double cropWidth = rect.width * 0.8;
                  double cropHeight = cropWidth;
                  double left = (rect.width - cropWidth) / 2;
                  double top = (rect.height - cropHeight) / 2;
                  double right = left + cropWidth;
                  double bottom = top + cropHeight;
                  cropSizeNotifier.value =
                      Rect.fromLTRB(left, top, right, bottom);
                  return Rect.fromLTRB(left, top, right, bottom);
                },
                maskColor: Colors.black.withOpacity(0.6),
                interactive: true,
                progressIndicator: Container(
                  color: ColorConfig.color12091C,
                  child: const Center(
                    child: CircularProgressIndicator(color: Colors.white),
                  ),
                ),
                cornerDotBuilder: (size, edgeAlignment) {
                  return const SizedBox();
                },
                baseColor: ColorConfig.color12091C,
                controller: _cropController,
                onCropped: (croppedData) => _saveCroppedImage(croppedData),
              ),
              ValueListenableBuilder<Rect?>(
                valueListenable: cropSizeNotifier,
                builder: (context, cropRect, child) {
                  if (cropRect == null) return const SizedBox.shrink();
                  return Positioned(
                    left: cropRect.left - 2.w,
                    top: cropRect.top - 2.h,
                    child: IgnorePointer(
                      child: Container(
                        width: cropRect.width + 4.w,
                        height: cropRect.height + 4.h,
                        alignment: Alignment.center,
                        child: SvgPicture.asset(
                          Assets.svgImgCqk,
                          fit: BoxFit.fill,
                          width: cropRect.width + 4.w,
                          height: cropRect.height + 4.h,
                        ),
                      ),
                    ),
                  );
                },
              ),
              Positioned(
                left: 0,
                right: 0,
                bottom: 74.h,
                child: Row(
                  children: [
                    SizedBox(width: 16.w),
                    Expanded(
                        child: GradientButton(
                            text: S.current.changePhoto,
                            useGradient: false,
                            svgOnLeft: false,
                            rightIconSize: 16,
                            assetsName: Assets.svgIcoGh,
                            backgroundColor: const Color(0xFF272242),
                            onPressed: () {
                              ImageChooseManager.instance.onPickImage(context,
                                  maxAssets: 1,
                                  currentAssets: [
                                    _chooseAssets!
                                  ]).then((value) async {
                                if (value is String) {
                                  EasyLoading.showError(value);
                                } else if (value is List) {
                                  if (value.isNotEmpty) {
                                    setState(() {
                                      _chooseAssets = value[0];
                                    });
                                    // _loadImage(value[0]);
                                  }
                                }
                              });
                            })),
                    SizedBox(width: 7.w),
                    Expanded(
                        child: GradientButton(
                            text: S.current.confirm,
                            onPressed: () {
                              _cropController.crop();
                            })),
                    SizedBox(width: 16.w),
                  ],
                ),
              ),
              Positioned(
                top: 0,
                left: 0,
                right: 0,
                child: CommonAppBar(
                  backgroundColor: Colors.transparent,
                  title: S.current.cropTitle,
                  fontSize: 14.sp,
                ),
              ),
            ],
          );
        } else {
          return Center(child: Text(S.current.noImageData));
        }
      },
    );
  }

by the way: Can rotation and flipping be supported?