当前位置: 首页 > 知识库问答 >
问题:

如何使用rootBundle在flutter加载图像?

岳玉堂
2023-03-14

我使用图像插件(图像:^2.0.4),这样我就可以在图像上写些东西,然后将新图像保存到设备或通过邮件发送。我尝试使用“新文件”加载图像,但在颤振时出错。我询问并搜索,得到一个提示,我可以使用rootBundle在flatter中加载图像。我做到了,我得到了下面的错误。

[错误:topaz/lib/tonic/logging/dart_ERROR.cc(16)]未处理的异常:无法加载资产:packages/myAppName/assets/images/ReceiptRaw_1。jpg

当我创建一个简单的飞镖控制台应用程序时,该插件可以工作,但不能使用flutter加载。任何帮助请,

这是颤振代码:

    Future<bool> makeReceiptImage() async {

// UPDATE ****************************************

      // load the receipt jpeg
  var imageData = await rootBundle.load('packages/myAppName/dekonts/ReceiptRaw_1.jpg');
  print("imageData: $imageData"); // Prints as imageData: Instance of 
'_ByteDataView'

// UPDATE ****************************************

  Image _receiptImage = await decodeImage(new File(imageData).readAsBytesSync());

      drawString(_receiptImage, arial_48, 440, 30, “Customer Name”, color: 0xFF000000); 

      // Write it to disk as a different jpeg 
      var new_jpeg = await encodeJpg(_receiptImage); 
      String newImagePath = await rootBundle.loadString('packages/myAppName/assets/images/ReceiptRaw_2.jpg'); 
      await new File(‘$newImagePath’).writeAsBytesSync(new_jpeg); 
    }

这是Dart控制台代码:

import 'dart:io';
import 'dart:convert';
import 'dart:async';
import 'package:image/image.dart';

void main() async {
  // load the receipt jpeg
  String mImagePath = 'images/ReceiptRaw_1.jpg';
  Image _receiptImage = decodeImage(new File(mImagePath).readAsBytesSync());
  drawString(_receiptImage, arial_48, 440, 30, “Customer Name”, color: 0xFF000000);

  // Write it to disk as a different jpeg
  var new_jpeg = encodeJpg(_receiptImage);
  new File('images/ReceiptRaw_1.jpg').writeAsBytesSync(new_jpeg);
}

更新-1:当我使用以下代码时,我得到的错误为:

在pubspec中检测到错误。yaml:未找到资产的文件或变体:packages/myAppName/assets/images/ReceiptRaw_1。jpg

 String imageData = await rootBundle.loadString('packages/myAppName/assets/images/ReceiptRaw_1.jpg');
  Image _receiptImage = await decodeImage(new File(imageData).readAsBytesSync());

更新-2:如果我使用rootBundle。加载我得到以下错误。

错误:类型为“dart”的值。无法将typed_data::ByteData'分配给dart类型的变量。核心::字符串'。

var imageData = await rootBundle.load('packages/myAppName/assets/images/ReceiptRaw_1.jpg');
  Image _receiptImage = await decodeImage(new File(imageData).readAsBytesSync());

最新更新:

步骤1:移动到ReceiptRaw_1.jpglib/dekonts/文件夹

更改为:

assets:
  - packages/myAppName/dekonts/ReceiptRaw_1.jpg

更改为:

var imageData = await rootBundle.load('packages/myAppName/dekonts/ReceiptRaw_1.jpg');
print("imageData: $imageData"); 

结果:打印为

imageData:“\u ByteDataView”的实例

步骤2:移动到/lib/assets/images/ReceiptRaw\u 1。jpg文件夹

更改为:

assets:
  - packages/myAppName/lib/assets/images/ReceiptRaw_1.jpg

更改为:

var imageData = await rootBundle.load('packages/myAppName/lib/assets/images/ReceiptRaw_1.jpg');
print("imageData: $imageData"); 

结果:获取的错误为:

正在解析依赖项。。。正在运行“gradlew AssembledBug”。。。在pubspec中检测到错误。yaml:未找到资产的文件或变体:packages/myAppName/lib/assets/images/ReceiptRaw_1。jpg

更新:

///例如,要包括第一幅图像,请使用pubspec。应用程序的yaml
///在资产部分指定它:
///
///资产://-packages/fancy_backgrounds/background1。png//
///lib/是隐含的,因此不应包含在资产路径中。

共有2个答案

能逸清
2023-03-14

在@Günter Zöchbauer的帮助下,我终于成功了。我对堆栈溢出成员的小贡献。

//TODO:1-加载所有内容

  Future _loadEverything() async {
    await _requestAppDocumentsDirectory();   // TODO: 2 - GET APP DOCUMENTS DIRECTORY
    _dekontExist = await makeReceiptImage(); // TODO: 3 - MAKE A RECEIPT

    // Show the writen image
    if (_dekontExist == true) {
      setState(() {
        newDekontImage = _appDocumentsDirectory + "/" + widget._currentUserReceiptNo + ".jpg";
        imageOkay = true; // FOR - 4 - MAIN WIDGET BUILD
      });
    }
  }

//TODO:2-获取应用程序文档目录

Future _requestAppDocumentsDirectory() async {
  // I choose temp dir because I don’t want to write twice same Receipt
  // Also when user close the app it will destroys the images
  final _directory =
      await getTemporaryDirectory(); //getApplicationDocumentsDirectory();
  setState(() {
    _appDocumentsDirectory = _directory.path;
  });
}

//TODO: 3-制作收据

Future<bool> makeReceiptImage() async {

  // I use this as a template:
  // 'packages/mayApp/assets/images/CapitalReceipt.jpg'  

  ByteData imageData = await rootBundle.load('packages/mayApp/assets/images/CapitalReceipt.jpg');
  List<int> bytes = Uint8List.view(imageData.buffer);
  Image _receiptImage = decodeImage(bytes);

  // TODO: WRITE ON TO THE IMAGE
  drawString(_receiptImage, arial_48, 440, 30, “Customer Receipt - Customer Name”, color: 0xFF000000);


  // Write it to disk as a different jpeg
    var new_jpeg = await encodeJpg(_receiptImage);
    String newDekontImage = _appDocumentsDirectory + "/" + "${_currentUserReceiptNo}" + ".jpg";
    await new File(newDekontImage).writeAsBytesSync(new_jpeg);

  return true;
}

//TODO:4-主小部件构建

  @override
  Widget build(BuildContext context) {
    capitalHeight = MediaQuery.of(context).size.height;
    capitalWidth = MediaQuery.of(context).size.width;

    if (imageOkay == true) {
      return new Scaffold(
        resizeToAvoidBottomPadding: true,
        appBar: new AppBar(
          title: new Text("Customer Receipt"),
          backgroundColor: const Color(0xFF7CB342),
          elevation: 0.0,
          actions: <Widget>[
            new Container(
              padding: EdgeInsets.only(right: 10.0),
              child: new Icon(Icons.mail),
            )
          ],
        ),
        body: new Column(
          children: <Widget>[
            new Padding(
              padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
              child: new Center(
                child: new Container(
                  width: capitalWidth,
                  height: capitalHeight / 2.3,
                  color: Colors.black54, //capitalLightGreen,
                  child: new Container(
                    width: capitalWidth - 20.0,
                    height: capitalHeight / 2.3,
                    child: Image.file(File('$newDekontImage')),
                  )
                ),
              )
            ),
          ],
        ),
      );
    } else {
      return new Scaffold(
          resizeToAvoidBottomPadding: true,
          appBar: new AppBar(
            title: new Text("Customer Receipt"),
            backgroundColor: const Color(0xFF7CB342),
            elevation: 0.0,
            actions: <Widget>[
              new Container(
                padding: EdgeInsets.only(right: 10.0),
                child: new Icon(Icons.mail),
              )
            ],
          ),
          body: new Center(
            child: new CircularProgressIndicator(),
          ));
    }
  }
狄奕
2023-03-14

发布依赖项的文件不能作为文件使用。它们包含在存档文件中。

将图像添加到pubspec中的资源。yaml

flutter:
  assets:
    - packages/myAppName/assets/images/ReceiptRaw_1.jpg

然后装上

var imageData = await rootBundle.load('packages/myAppName/assets/images/ReceiptRaw_1.jpg');

为此,请使用文件ReceiptRaw\u 1。jpg需要在

myAppName/lib/assets/images/ReceiptRaw_1.jpg

其中lib/部分是强制性的。

 类似资料:
  • 问题内容: 我使用图片插件( image:^ 2.0.4 ),以便可以在图片上写一些内容,然后将其保存为新图片到设备或通过邮件发送。我尝试使用“ new File ” 加载图像,但Flutter出现错误。我询问并搜索,并得到一个提示,我可以使用rootBundle在Flutter中加载图像。我做到了,我得到以下错误。 [错误:topaz / lib / tonic / logging / dart

  • 我是flutter的新手,上周才开始。我正在从在线课程中学习,然后我想在我的flutter应用程序中加载一个图像。但有一个错误是:

  • 我试了所有的办法,但似乎都不奏效。据我说,图像的路径是正确的。(虽然我附上了一张图片供参考)。这就是我得到的错误- 这是**pubspec.yaml*- 名称:foodfast描述:一个新的颤振项目。 Publish_To:'none' 版本:1.0.0+1 环境:SDK:“>=2.7.0<3.0.0” 依赖项:flutter:SDK:flutter 弹出屏幕:^1.3.5 cupertino_i

  • 我正在使用slick.js构建一个旋转木马。但是,即使我将属性从更改为,在我滚动到该图像之前,图像仍然会被加载。我怀疑这是因为我的图像中有标记。我的问题是如何防止浏览器加载响应图像,或者如何正确地延迟加载响应图像。 这是我的img标签的样本

  • 正如你可以看到的使用链接,毕加索只有3个选项加载一个图像。我的问题是,如果您有一个从API的JSON响应解析的base64字符串,那么如何加载图像?

  • 我正在开发我的第一个真正的flutter项目,我有一个关于资产的问题。我可以使用平台资产加载我的应用图标吗?如果没有,我需要创建flutter资产到我的应用程序。但是,一般图标的推荐大小是多少? 但Android和IOS的屏幕尺寸很多。使用平台资产,我根据平台规范创建所有图标。我在《扑扑》里表现如何?通用图标的规格是什么? 谢谢!