使用flutter中的容器位置裁剪图像

Question

在这段代码中，它工作得很好。但我必须改变一些。

在这段代码中，一个容器固定位置，并在这个容器中添加了一张图片。以及 1 个可移动容器和 1 个裁剪按钮。

但是当点击裁剪按钮时，可移动容器图像区域被剪切并显示下一个屏幕。

-----我需要这个改变----------

当点击裁剪按钮时，会裁剪可移动容器图像区域，但不会显示到新屏幕上。在相同位置显示可移动容器中的裁剪图像输出，并且隐藏外侧图像。我必须为我需要的输出添加一些图像。

import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      home: Scaffold(body: ImageCrop(image: const AssetImage("images/rose1.png")))));
}

class ImageCrop extends StatefulWidget {
  const ImageCrop({Key? key, required this.image}) : super(key: key);
  final ImageProvider image;

  @override
  State<ImageCrop> createState() => _ImageCropState();
}

class _ImageCropState extends State<ImageCrop> {
  late ImageStream _imageStream;
  ui.Image? _image;
  late double _left;
  late double _top;
  late double _width;
  late double _height;

  @override
  void initState() {
    super.initState();
    _left = 0.0;
    _top = 0.0;
    _width = 100.0;
    _height = 100.0;

    // Call _getImage after initState is completed
    WidgetsBinding.instance?.addPostFrameCallback((_) {
      _getImage();
    });
  }

  void _getImage() {
    _imageStream = widget.image.resolve(createLocalImageConfiguration(context));
    _imageStream.addListener(ImageStreamListener(_updateImage));
  }

  void _updateImage(ImageInfo imageInfo, bool synchronousCall) {
    setState(() {
      _image = imageInfo.image;
    });
  }

  @override
  void didUpdateWidget(ImageCrop oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.image != oldWidget.image) {
      _imageStream.removeListener(ImageStreamListener(_updateImage));
      _imageStream =
          widget.image.resolve(createLocalImageConfiguration(context));
      _imageStream.addListener(ImageStreamListener(_updateImage));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Padding(
        padding: const EdgeInsets.only(top:50),
        child: Column(
          children: [
            ElevatedButton(
              onPressed: () async {
                final data = await _crop();
                Navigator.of(context).push(MaterialPageRoute(
                    builder: (ctx) => Scaffold(
                        appBar: AppBar(),
                        body: SizedBox.expand(
                            child: Container(
                                decoration:
                                    BoxDecoration(border: Border.all(width: 2)),
                                child: Image.memory(data!.buffer.asUint8List(),
                                    fit: BoxFit.contain))))));
              },
              child: const Text('crop'),
            ),
            Stack(
              children: [
                Container(
                  width: 200,
                  height: 200,
                  decoration: BoxDecoration(
                        border: Border.all(color: Colors.black)// Add border radius if needed
                  ),
                  child:
                      Image(image: widget.image, fit:BoxFit.contain,) // Load image from asset
                ),
                Positioned(
                  left: _left,
                  top: _top,
                  child: GestureDetector(
                    onPanUpdate: (details) {
                      setState(() {
                        _left += details.delta.dx;
                        _top += details.delta.dy;
                      });
                    },
                    child: Container(
                      width: _width,
                      height: _height,
                      decoration:
                          BoxDecoration(border: Border.all(color: Colors.black38)),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Future<ByteData?> _crop() async {
    if (_image == null) return null;
    final scale = _image!.width / MediaQuery.of(context).size.width;
    final left = _left * scale;
    final top = _top * scale;
    final width = _width * scale;
    final height = _height * scale;
    final recorder = ui.PictureRecorder();
    final src = Rect.fromLTWH(left, top, width, height);
    final dst = Offset.zero & src.size;
    final canvas = Canvas(recorder, dst);
    canvas.drawImageRect(_image!, src, dst, Paint());
    final picture = recorder.endRecording();
    final cropped = await picture.toImage(width.toInt(), height.toInt());
    return await cropped.toByteData(format: ui.ImageByteFormat.png);
  }
}

当单击裁剪按钮时，我必须显示此输出。

Answer 1

You must change your onPressed method to:


    onPressed: () async {
                     await _crop().then((data){
                       Navigator.of(context).push(MaterialPageRoute(
                           builder: (ctx) => Scaffold(
                              appBar: AppBar(),
                              body: SizedBox.expand(
                                      child: Container(
                                      decoration: BoxDecoration(border: 
                                      Border.all(width: 2)),
                                      child: Image.memory(data!.buffer.asUint8List(),
                                        fit: BoxFit.contain))))));

});
                   
                  },