How do I get an actual Image from this?

[NenkoHD]

Hello, I really like this but I dont know how i'm supposed to get an actual image to upload to Firebase Storage from the "Rect" Object that returns when I stop moving.

I really hope you can help me out and tell me how I can achieve to get a uploadable png file or anything like that from your lib. Thank you in forward. :)

[godaangel]

Hello, I really like this but I dont know how i'm supposed to get an actual image to upload to Firebase Storage from the "Rect" Object that returns when I stop moving.

I really hope you can help me out and tell me how I can achieve to get a uploadable png file or anything like that from your lib. Thank you in forward. :)

Thank u for your like, but I'm sorry that now this package dose not has 'real clip png', I will finish this in one week :)

[NenkoHD]

Thank you! That would be awesome, keep up your good work. :)

[kiaxseventh]

dear @godaangel
can you say when time can you do it ?

[godaangel]

dear @godaangel can you say when time can you do it ?

Can be done this weekend

Because there is a release request this week, I'm busy, sorry

[godaangel]

dear @realNiqu @kiaxseventh I have finished this issue, you can get Uint8List result and use this to do what you want to do. you can see example or readme

[kiaxseventh]

dear @godaangel thank you lot of for added this feature

this crop has problem crop result position and size is not trust you can see in the videos below

https://user-images.githubusercontent.com/15640035/113502820-d3946f80-9543-11eb-8820-9d0571a1ed1d.mp4

https://user-images.githubusercontent.com/15640035/113503208-94671e00-9545-11eb-90a9-ef3f0caaadd2.mp4

[godaangel]

ok, let me check it

[godaangel]

@kiaxseventh can u give me this image's url ?

[godaangel]

@kiaxseventh and u can give me your example code too.

[godaangel]

@kiaxseventh you can check if your clipSize is or not same as your origin image size

CropBox(
  clipSize: Size(w, h),  //  w/h = image.width/image.height
)

[kiaxseventh]

hello dear @godaangel thanks for your answer it is my example source code

these are my images sizes:

1816 x 4032
2268 x 4032
3024 x 4032

pubspec.yaml :

  image_picker: ^0.7.4
  crop_box: ^0.1.8
  flutter_screenutil: 4.0.2+2

main.dart :

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
        designSize: Size(750, 1334),
        allowFontScaling: false,
        child: MaterialApp(
          home: FirstScreenFilePicker(),
        ));
  }
}

class FirstScreenFilePicker extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Crop Box'),
      ),
      body: Center(
        child: Container(
          margin: EdgeInsets.all(32),
          child: FlatButton(
            child: Text(
              'Pick Image',
              style: TextStyle(color: Colors.white),
            ),
            color: Colors.blue,
            onPressed: () async {
              PickedFile pickedFile = await ImagePicker().getImage(source: ImageSource.gallery);
              Uint8List bytes = await pickedFile.readAsBytes();
              Navigator.push(context, MaterialPageRoute(builder: (context) => CropImageScreen(imageData: bytes)));
            },
          ),
        ),
      ),
    );
  }
}

_crop_imagescreen.dart :

class CropImageScreen extends StatefulWidget {
  CropImageScreen({this.imageData});

  final Uint8List imageData;

  @override
  _CropImageScreenState createState() => _CropImageScreenState();
}

class _CropImageScreenState extends State<CropImageScreen> {
  Rect _resultRect = Rect.zero;

  Size _maxCropSize = Size(300, 300);
  Size _cropRatio = Size(1, 1);
  Rect _cropRect;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('widget.title'),
      ),
      body: Container(
        child: Column(
          children: [
            Expanded(
              child: CropBox(
                gridLine: GridLine(),
                cropBoxType: CropBoxType.Circle,
                cropRect: _cropRect,
                // clipSize: _clipDemoSize,
                clipSize: Size(300, 300),   // it's just example size but it is not correct because image size are different :D
                maxCropSize: _maxCropSize,
                cropRatio: _cropRatio,
                cropBoxBorder: CropBoxBorder(
                  color: Colors.white,
                  radius: Radius.circular(5),
                ),
                cropRectUpdateEnd: (rect) {
                  _resultRect = rect;
                  print("cropRectUpdateEnd   =>   $rect");
                  setState(() {});
                },
                cropRectUpdate: (rect) {
                  _resultRect = rect;
                  print("cropRectUpdate   =>   $rect");
                  setState(() {});
                },
                child: Image.memory(
                  widget.imageData,
                  width: double.infinity,
                  height: double.infinity,
                  fit: BoxFit.cover,
                ),
              ),
            ),
            RaisedButton(
                color: Colors.blue,
                child: Text(
                  'Export',
                ),
                onPressed: () async {

                  Uint8List result = await ImageCrop.getResult(clipRect: _resultRect, image: widget.imageData);
                  Navigator.push(
                      context, MaterialPageRoute(builder: (context) => CropResulteScreen(imageData: result)));
                }),
          ],
        ),
      ),
    );
  }
}

_crop_resultescreen.dart :

class CropResulteScreen extends StatelessWidget {
  CropResulteScreen({this.imageData});

  final Uint8List imageData;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Image.memory(imageData),
    );
  }
}

[kiaxseventh]

@kiaxseventh you can check if your clipSize is or not same as your origin image size

CropBox(
  clipSize: Size(w, h),  //  w/h = image.width/image.height
)

it is not good idea please see my example source code i think we need another solution

[godaangel]

@kiaxseventh ok, let me check it

[godaangel]

@kiaxseventh I have update a function ImageCrop.getImageSize that u can get true Size with it, and you can see example in example, i have add the example with local image choose