首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >有没有办法在flutter中将动态加载的图像文件合并为一个图像文件?

有没有办法在flutter中将动态加载的图像文件合并为一个图像文件?
EN

Stack Overflow用户
提问于 2020-10-30 15:51:53
回答 1查看 575关注 0票数 1

有没有办法在flutter中将动态加载的图像文件合并为一个图像文件?

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

代码语言:javascript
复制
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()函数中实现了它,但我得到了错误。

**参数类型'List (其中图像在C:\src\flutter\packages\flutter\lib\src\widgets\image.dart)‘中定义)不能分配给参数类型'List (其中图像在C:\src\flutter\bin\cache\pkg\sky_engine\lib\ui\painting.dart)'.中定义**

错误图像已附加

EN

回答 1

Stack Overflow用户

发布于 2020-11-01 18:24:33

代码语言:javascript
复制
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
    ),
  });
}

试试这段代码。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64604475

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档