How to display Cover Image of an epub file in Flutter - flutter

The dart-epub plugin mentions an example on how to get Cover Image:
// Book's cover image (null if there is no cover)
Image coverImage = epubBook.CoverImage;
How can I display this? I keep getting an error
The following _TypeError was thrown building:
type 'Image' is not a subtype of type 'ImageProvider<Object>'

Update: I figured it out
Import the image and epub package as
import 'package:image/image.dart' as image;
import 'package:epub/epub.dart' as epub;
Open the epub file
// Change the location to wherever your epub file is located
var targetFile = new File('location/epubFile.epub');
List<int> bytes = await targetFile.readAsBytes();
epub.EpubBook epubBook = await epub.EpubReader.readBook(bytes);
Save the Cover Image to some location (ideally same folder as the epub file so it easier to delete together)
// Save the Cover Image to some location
if (await File('location/epubFileCoverImage.png').exists()) {
print("File exists");
} else {
try {
File('location/epubFileCoverImage.png')
.writeAsBytesSync(image.encodePng(epubBook.CoverImage));
} catch (e) {
print("Error Saving Cover Image");
print(e);
coverError = true;
}
}
Use Exception handling as there may be errors loading the Cover Image for some epub files
Finally to display it in the Widget tree:
coverError ? Image.asset("assets/Error.png")
: Image.file(File('location/epubFileCoverImage.png')),

Related

flutter download automatic image and save it in assets

in my app,I want to use SVG images from the asset file.
but I want to check them in-the app, if the image asset is different from my image network from the server, I download the image network and replace it in my image asset and again read it from the asset to show them.
how can I do that?
bool showSvg = false;
void compareSvg(){
if(value['svgimage']['name'] != Image.profileSvg){
// how download svg network and replace it to assetfile
}else{
showSvg = true; });}
and its my code example :
showSvg
?SvgPicture.asset(Image.profileSvg)
:SvgPicture.asset(Image.newProfileSvg),
You can not compare images (technically you can, but it very complicated task) and replace assets file. You need to cache you image after first downloading, and set your asset as placeholder before your image are downloaded. Look in to dock here.
Edited:
Okay. I don't get your answer about svg, but if true here solution
Add this pub for file caching to your project. And this code may help:
File? _downloaded;
void _fetchImage() async {
const key = "profile";
const url =
"http://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg";
final file = await DefaultCacheManager().getSingleFile(url, key: key);
setState(() {
_downloaded = file;
});
}
Widget _svgImageFetcher() {
_fetchImage();
Widget networkSvg;
if (_downloaded == null) {
networkSvg = SvgPicture.asset("assets/images/profile.svg");
} else {
networkSvg = SvgPicture.file(_downloaded!);
}
return Column(children: [Expanded(child: networkSvg)]);
}
Just put _svgImageFetcher() Widget where you want to display image. And change default svg image and url.

Convert landscape image to potrait (rotating the image) and save - Flutter

I have an image that is in landscape mode.
This is the image.
Now I need to convert it to portrait. i.e it should be like this.
And the image should be saved in the app directory. (saving part I know.just to complete the question)
How can I do that in flutter.
I use the lib image (https://pub.dev/packages/image) and you can call this code on a button action :
import 'package:image/image.dart' as ImageLib;
try {
File contrastFile = File(imagePath);
ImageLib.Image contrast =
ImageLib.decodeImage(contrastFile.readAsBytesSync());
contrast = ImageLib.copyRotate(contrast, -90);
contrastFile.writeAsBytesSync(ImageLib.encodeJpg(contrast));
setState(() {
imageCache.clear();
imageCache.clearLiveImages();
reload();
});
} catch (e) {
print(e);
}

Load an image with either JPG extension or PNG one

In my Flutter app, I return asset (product image) name by:
class Product {
// ...
final int id;
// ...
String get assetName => '$id-0.jpg';
}
And later, I use the asset name like:
// ...
image: AssetImage(product.assetName),
// ...
Now, the problem is some of the images are *.jpg and some are *.png like:
Is there a way to tell the Flutter image loader to try to load '$id-0.jpg' and if the file doesn't exist, then try to load '$id-0.png'? Perhaps I can do that with regular expressions, but I cannot figure out how.
You can determine if an asset exists with rootBundle.load and a try-catch block. rootBundle.load will throw an exception if the asset is not found.
ByteData image;
try{
image = await rootBundle.load(assetNameHere.jpg);
}
catch(e) {
image = await rootBundle.load(assetNameHere.png);
}
I don't know the exception that this will throw on the asset not existing, so I can't tell you which error to catch on, but you can figure that out and modify your code to only do the png code on that exception type instead of everything.
With this method, since you're already forced to load the image into memory, you can store the ByteData and use MemoryImage instead of AssetImage.

How to record a video with Camera Plugin in flutter?

I have this page where the camera is initialized and ready with a button that will record and stop the video, so I tried this :
FlatButton(
onPressed: () => {
!isRecording
? {
setState(() {
isRecording = true;
}),
cameraController.prepareForVideoRecording(),
cameraController.startVideoRecording('assets/Videos/test.mp4')
}
: cameraController.stopVideoRecording(),
},
............
but throws this error : nhandled Exception: CameraException(videoRecordingFailed, assets/Videos/test.mp4: open failed: ENOENT (No such file or directory)).
I don't understand, I don't want to open this file I want to save it there, Is there sth wrong with my code ?
In the new version, static method startRecordingVideo doesn't take any string parameter.
When you want to start the recording just see whether a video is already getting recorded, if not start
if (!_controller.value.isRecordingVideo) {
_controller.startVideoRecording();
}
and when you want to finish the recording you can call the static method stopVideoRecording() and it will give you a object of the class XFile, it will have the path to your video.
if (_controller.value.isRecordingVideo) {
XFile videoFile = await _controller.stopVideoRecording();
print(videoFile.path);//and there is more in this XFile object
}
This thing has worked for me. I am new to flutter please improve my answer if you know more.
You are trying to save a video in your assets folder which is not possible ,
What you need to do is to save to device locally either common folders like downloads or app directory.
Here is an example of how to go about it
dependencies:
path_provider:
Flutter plugin for getting commonly used locations on host platform
file systems, such as the temp and app data directories.
We will be saving the video to app directory.
We need to get the path to the directory where the file is or will be. Usually a file is put in the application's document directory, in the application's cache directory, or in the external storage directory. To get the path easily and reduce the chance of type, we can use PathProvider
Future<String> _startVideoRecording() async {
if (!controller.value.isInitialized) {
return null;
}
// Do nothing if a recording is on progress
if (controller.value.isRecordingVideo) {
return null;
}
//get storage path
final Directory appDirectory = await getApplicationDocumentsDirectory();
final String videoDirectory = '${appDirectory.path}/Videos';
await Directory(videoDirectory).create(recursive: true);
final String currentTime = DateTime.now().millisecondsSinceEpoch.toString();
final String filePath = '$videoDirectory/${currentTime}.mp4';
try {
await controller.startVideoRecording(filePath);
videoPath = filePath;
} on CameraException catch (e) {
_showCameraException(e);
return null;
}
//gives you path of where the video was stored
return filePath;
}

Flutter how to Convert filePath from content://media/external/images/media/5275 to /storage/emulated/0/DCIM/Camera/IMG_00124.jpg

I have URI LIKE below
content://media/external/images/media/5275
but I want convert it to Like format below:
/storage/emulated/0/DCIM/Camera/IMG_00124.jpg
Anyone who can help me!
Sreng Bona
Thanks!
var path = await FlutterAbsolutePath.getAbsolutePath("content://media/external/images/media/5275");
Add this flutter_absolute_path: ^1.0.6 to your file: pubspec.yaml
It will be working as Well.
Bona SR.
I had to search a lot, but I found a very useful solution to save the image in the cell phone's photo gallery and get the absolute path to use it the way you want.
For this example I used a result obtained from saving an image in the photo gallery, however it could also work to read other files, obviously making the changes that you see necessary, I hope it will help you
uri_to_file
image_gallery_saver
import 'dart:io';
import 'package:image_gallery_saver/image_gallery_saver.dart';
import 'package:uri_to_file/uri_to_file.dart';
Future<File> saveImage(File image, String identifier) async {
try {
var result = await
ImageGallerySaver.saveImage(image.readAsBytesSync(),
quality: 60, name: identifier +
"-${DateTime.now().toIso8601String()}");
print(result);
File file = await toFile(Uri.parse(result['filePath']));
print(file);
return file;
} catch (e) {
print(e);
return new File('assets/img/default-img.jpg');
}
}
// example
saveImage(File("path/image.jpg"),"img-test");