有没有办法将动态加载的图像文件合并到一个图像文件中？
Posted
技术标签:
【中文标题】有没有办法将动态加载的图像文件合并到一个图像文件中？【英文标题】：is there a way to merge dynamically loaded image file to one image file in flutter? 【发布时间】：2021-02-12 16:27:10 【问题描述】：我s
我已经添加了图片。 我需要将加载的图像合并到一个图像中，我使用的代码如下所示
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 (其中 Image 定义在 C:\src\flutter\packages\flutter\lib\src\widgets\image.dart)' 不能分配给参数类型 'List (其中 Image 在 C:\src\flutter\bin\cache\pkg\sky_engine\lib\ui\painting.dart)' 中定义。 **
附上错误图片
【问题讨论】：
这是不同的Image类。试试这个方法 [ImagesMergeHelper.loadImageFromProvider(NetworkImage(networkImagePath))] @Won 我没听懂你能不能给我看看。？ 【参考方案1】：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
),
);
试试这个代码。
【讨论】：
以上是关于有没有办法将动态加载的图像文件合并到一个图像文件中？的主要内容，如果未能解决你的问题，请参考以下文章