why crop result always is square

[SG-XM]

[Koen Van Looveren]

Did you change anything about the example project?

[SG-XM]

            child: CustomImageCrop(
              cropController: controller,
              // image: const AssetImage('assets/test.png'), // Any Imageprovider will work, try with a NetworkImage for example...
              image: AssetImage("assets/test.png"),
              shape: _currentShape,
              ratio: _currentShape == CustomCropShape.Ratio
                  ? Ratio(width: _width, height: _height)
                  : null,
              canRotate: false,
              canMove: true,
              canScale: true,
                // overlayColor: Colors.yellow,
                backgroundColor:Colors.transparent
              // use custom paint if needed
              // pathPaint: Paint()
              //   ..color = Colors.red
              //   ..strokeWidth = 4.0
              //   ..style = PaintingStyle.stroke
              //   ..strokeJoin = StrokeJoin.round,
            ),
          ),

[SG-XM]

and this is resultpage, I wrap the image with contianer, and set color yellow

     body: Center(
        child: Column(
          children: [
            const Spacer(),
            Container(color:Colors.yellow,child:
            Image(
              image: image,
            ),),
            ElevatedButton(
              child: const Text('Back'),
              onPressed: () => Navigator.of(context).pop(),
            ),
            const Spacer(),
          ],

[SG-XM]

Did you change anything about the example project?

even if i download this repo without any modification of code,the result also is square

[William Verhaeghe]

What is your question exactly? The result is always a square since images are always squares. We can crop the image, but eventually it will result in a square. For now the background color is white, you can change that by setting the backgroundColor.
The issue is that you can't simply crop an image for now. What we do is draw it on a canvas and convert that canvas to an image. A canvas can't be transparant, so you always have a background color. What you could do is convert the pixels afterwards, but this requires some additional code. Feel free to open a PR for this!

[SG-XM]

What is your question exactly? The result is always a square since images are always squares. We can crop the image, but eventually it will result in a square. For now the background color is white, you can change that by setting the backgroundColor. The issue is that you can't simply crop an image for now. What we do is draw it on a canvas and convert that canvas to an image. A canvas can't be transparant, so you always have a background color. What you could do is convert the pixels afterwards, but this requires some additional code. Feel free to open a PR for this!

Thanks for your explanation, I misunderstood the function of this repo. I had assumed that the canvas would be created with the same size of croparea rather than the size of originimage.

[William Verhaeghe]

The reason we use the original size is that different devices should have the same result. Otherwise, if you crop on a small phone, the resulting image is pixelated even if you use a high res image. You can resize the result if you'd like.

[SG-XM]

Thanks for your explanation

Thanks for your explanation

The reason we use the original size is that different devices should have the same result. Otherwise, if you crop on a small phone, the resulting image is pixelated even if you use a high res image. You can resize the result if you'd like.

Thanks for your explanation, I will close this issue.