有没有一种方法可以将动态加载的图像文件合并到一个图像文件中?

时间:2020-10-30 07:51:53

标签: image flutter merge flutter-layout

enter image description here是否可以通过一种方法将动态加载的图像文件合并为一个图像文件?

我已添加图片。 我需要将加载的图像合并为一张我已使用的代码,如下所示


import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image/image.dart' as immg;
import 'package:image_cropper/image_cropper.dart';
import 'package:image_picker/image_picker.dart';

import 'package:http/http.dart' as http;
import 'dart:convert';

import 'package:merge_images/merge_images.dart';


class SingleImageUpload extends StatefulWidget {
  @override
  _SingleImageUploadState createState() {
    return _SingleImageUploadState();
  }
}

class _SingleImageUploadState extends State<SingleImageUpload> {
  List<Object> images = List<Object>();
  List<File> imgList = List<File>();
  List<Image> listimg = List<Image>();

  File _selectedFile;
  bool _inProcess = false;
  Map data = {};
  Readerservice _readerservice;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    setState(() {
      images.add("Add Image");
      images.add("Add Image");
      images.add("Add Image");
      images.add("Add Image");
    });
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      home: new Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          leading: Padding(
            padding: EdgeInsets.only(left: 12),
            child: IconButton(
              icon: Icon(Icons.arrow_back_ios,
                color: Colors.black,
                size: 30,),
              onPressed: () {
                Navigator.pushNamed(context, '/Mainpage');

              },
            ),
          ),
          title: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children:<Widget>[
                Text('Basic AppBar'),
              ]
          ),
          actions: <Widget>[

            IconButton(
              icon: Icon(Icons.more_vert,
                color: Colors.black,
                size: 30,),
              onPressed: () {
                print('Click start');
              },
            ),
          ],

        ),
        body:
        
            SizedBox(height: 40),
            
            Expanded(
              child: buildGridView(),
            ),
            RaisedButton(
              textColor: Colors.white,
              color: Colors.orange,
              child: Text("Finish",
                style: TextStyle(fontSize: 15),),
              onPressed: () {
                pasimage();
              },
              shape: new RoundedRectangleBorder(
                borderRadius: new BorderRadius.circular(8.0),
              ),
            ),
          ],

        ),
      ),

    );
  }

  Widget buildGridView() {
    return GridView.count(
      shrinkWrap: true,
      crossAxisCount: 3,
      childAspectRatio: 1,
      children: List.generate(images.length, (index) {
        if (images[index] is ImageUploadModel) {
          ImageUploadModel uploadModel = images[index];
          return Card(
            clipBehavior: Clip.antiAlias,
            child: Stack(
              children: <Widget>[
                Image.file(
                  uploadModel.imageFile,
                  width: 300,
                  height: 300,
                ),
                Positioned(
                  right: 5,
                  top: 5,
                  child: InkWell(
                    child: Icon(
                      Icons.remove_circle,
                      size: 20,
                      color: Colors.red,
                    ),
                    onTap: () {
                      setState(() {
                        images.replaceRange(index, index + 1, ['Add Image']);
                      });
                    },
                  ),
                ),
              ],
            ),
          );
        } else {
          return Card(
            child: IconButton(
              icon: Icon(Icons.add),
              onPressed: () {
                //popup
                showDialog(
                  context: context,
                  builder: (context) {
                    return Dialog(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10)),
                      elevation: 16,
                      child: Container(
                        height: 180.0,
                        width: 330.0,
                        child: ListView(
                          children: <Widget>[
                            SizedBox(height: 20),
                            //Center(
                            Padding(
                              padding: const EdgeInsets.only(left: 15.0),
                              child: Text(
                                "Add a Receipt",
                                textAlign: TextAlign.left,
                                style: TextStyle(
                                    fontSize: 24,
                                    color: Colors.black,
                                    fontWeight: FontWeight.bold),
                              ),
                            ),
                            // ),
                            SizedBox(height: 20),
                            FlatButton(
                              child: Text(
                                'Take a photo..',
                                textAlign: TextAlign.left,
                                style: TextStyle(fontSize: 20),
                              ),
                              onPressed: () {
                                _onAddImageClick(index,ImageSource.camera);
                                Navigator.of(context).pop();

                                // picker.getImage(ImageSource.camera);
                              },
                              textColor: Colors.black,
                            ),
                            FlatButton(
                              child: Text(
                                'Choose from Library..',
                                style: TextStyle(fontSize: 20),
                                textAlign: TextAlign.left,
                              ),
                              onPressed: () {
                                _onAddImageClick(index,ImageSource.gallery);
                                Navigator.of(context).pop();
                              },
                              textColor: Colors.black,
                            ),
                          ],
                        ),
                      ),
                    );
                  },
                );
                //pop ends
                //_onAddImageClick(index);
              },
            ),
          );
        }
      }),
    );

  }

  Future  _onAddImageClick(int index, ImageSource source ) async {
    setState(() {
      _inProcess = true;
    });
    File image = await ImagePicker.pickImage(source: source);
      if(image != null){
        File cropped = await ImageCropper.cropImage(
            sourcePath: image.path,
            maxWidth: 1080,
            maxHeight: 1080,

            compressFormat: ImageCompressFormat.jpg,
            androidUiSettings: AndroidUiSettings(
                toolbarColor: Colors.black,
                toolbarWidgetColor: Colors.white,
                //toolbarTitle: "RPS Cropper",
                statusBarColor: Colors.deepOrange.shade900,
                backgroundColor: Colors.black,
                initAspectRatio: CropAspectRatioPreset.original,
                lockAspectRatio: false
            ),
            iosUiSettings: IOSUiSettings(
              minimumAspectRatio: 1.0,
            )
        );

        this.setState((){
          _selectedFile = cropped  ;
          _inProcess = false;
        });
      } else {
        this.setState((){
          _inProcess = false;
        });
      }
      getFileImage(index);
    }


  void getFileImage(int index) async {
//    var dir = await path_provider.getTemporaryDirectory();
      setState(() {
        ImageUploadModel imageUpload = new ImageUploadModel();
        imageUpload.isUploaded = false;
        imageUpload.uploading = false;
        imageUpload.imageFile = _selectedFile ;
        imageUpload.imageUrl = '';
        imgList.add(imageUpload.imageFile);
        images.replaceRange(index, index + 1, [imageUpload]);
        print(imgList);
      });
  }
void pasimage(){

for(var i=0;i<imgList.length;i++){
  final imaes = immg.decodeImage(imgList[i].readAsBytesSync()) as Image;
  listimg.add(imaes);
}

  Navigator.pushReplacementNamed(context, '/crop',arguments: {
    'imageList':ImagesMerge(
      listimg,///required,images list
      direction: Axis.vertical,///direction
      backgroundColor: Colors.black26,///background color
      fit: false,///scale image to fit others
      //controller: captureController,///controller to get screen shot
    ),
  });
}

}

class ImageUploadModel {
  bool isUploaded;
  bool uploading;
  File imageFile;
  String imageUrl;

  ImageUploadModel({
    this.isUploaded,
    this.uploading,
    this.imageFile,
    this.imageUrl,
  });
}

我使用了来自pub.dev的图像合并包,我已经在pasimage()函数中实现了它,但是出现了错误。

**无法将参数类型'列表(其中在C:\ src \ flutter \ packages \ flutter \ lib \ src \ widgets \ image.dart中定义图像)'分配给参数类型'列表(图片是在C:\ src \ flutter \ bin \ cache \ pkg \ sky_engine \ lib \ ui \ painting.dart)中定义的)。 **

错误图片已附加image

1 个答案:

答案 0 :(得分:0)

import 'dart:ui' as ui;
List<ui.Image> listimg = List<ui.Image>();

...

void pasimage(){
   for(var i=0;i<imgList.length;i++){
      final imaes = await ImagesMergeHelper.loadImageFromFile(imgList[i]) as ui.Image;
      listimg.add(imaes);
   }

  Navigator.pushReplacementNamed(context, '/crop',arguments: {
    'imageList':ImagesMerge(
      listimg,///required,images list
      direction: Axis.vertical,///direction
      backgroundColor: Colors.black26,///background color
      fit: false,///scale image to fit others
      //controller: captureController,///controller to get screen shot
    ),
  });
}

尝试此代码。