从Flutter Widget获取PNG文件,无需绘制到屏幕

pb3skfrl  于 2023-01-06  发布在  Flutter
关注(0)|答案(2)|浏览(177)

我有一个有点像Wordle的游戏,我想像Wordle一样添加一个共享功能。我在游戏网格小部件上有一个标记,允许我渲染正常显示的版本,或者一个特殊的版本进行共享。我想使用小部件获取一个PNG文件(或者PNG字节数据)。我不想把它画到屏幕上,只是把它渲染到一些帧缓冲区,然后转换成PNG,虽然渲染到屏幕是可以的,如果替代方案是不可能的。通过查看文档,它不是很明显,我正在尝试做的是可能的,甚至有意义(看起来我可能必须将小部件示例化为元素,然后获得一个呈现对象,这似乎意味着必须将其放入我的布局中并将其绘制到显示器上),但也许我漏掉了什么有办法吗

oyt4ldly

oyt4ldly1#

您可能想看看flutter的screenshot包。

一个简单的包捕获小部件作为图像。现在你也可以捕获小部件,而不是呈现在屏幕上!

1.创建截图控制器示例
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  Uint8List _imageFile;

  //Create an instance of ScreenshotController
  ScreenshotController screenshotController = ScreenshotController(); 

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }
  ...
}
2.将您要捕获的小部件 Package 在ScreenshotWidget中。将控制器分配给您之前创建的screenshotController
Screenshot(
    controller: screenshotController,
    child: Text("This text will be captured as image"),
),
3、调用capture方法截图,返回Uint8List
screenshotController.capture().then((Uint8List image) {
    //Capture Done
    setState(() {
        _imageFile = image;
    });
}).catchError((onError) {
    print(onError);
});
额外:将图像保存到特定位置
final directory = (await getApplicationDocumentsDirectory ()).path; //from path_provide package
String fileName = DateTime.now().microsecondsSinceEpoch;
path = '$directory';

screenshotController.captureAndSave(
    path //set path where screenshot will be saved
    fileName:fileName 
);

参考this示例

k5ifujac

k5ifujac2#

我曾经在一个应用程序中工作,我需要类似的东西。搜索了一段时间后,我发现了一个名为“screenshot”的包
这个包可以让你把可见或不可见的小部件转换成图像。
下面是他们文档中的示例代码

ScreenshotController screenshotController = ScreenshotController();

  function createScreenshot(){
     screenshotController
       .captureFromWidget(Container(
         padding: const EdgeInsets.all(30.0),
         decoration: BoxDecoration(
           border: Border.all(color: Colors.blueAccent, width: 5.0),
           color: Colors.redAccent,
         ),
         child: Text("This is an invisible widget"),
       ),
     ).then((capturedImage) {
       // Here you will get image object
     });
  }

相关问题