flutter - 如何截取基于AndroidViews实现的WebView(webview_flutter)?
问题描述
我需要从 webview_flutter 截取 WebView 的屏幕截图,但它不起作用。
我有一个应用程序,它必须截取 WebView 的屏幕截图,然后对其进行处理。我尝试使用 Screenshot 包来做到这一点。我找到了这个信息https://github.com/fluttercommunity/flutter_webview_plugin/issues/181#issuecomment-497625384
从链接中,我了解到通过 Screenshot 插件是不可能做到的。
Screenshot(
controller: _screenshotController,
child: WebView(
initialUrl: widget._webUrl,
onWebViewCreated:
(WebViewController webViewController) {
if (_controller.isCompleted == false)
_controller.complete(webViewController);
},
),
);
void takeScreenshot() {
_screenshotController.capture().then(
(File image) async {
_screenshot = image;
}
);
当我截取屏幕截图时,我得到了透明的 png 图像,而我想捕获 WebView 内容
解决方案
正如我向这个类似问题报告的那样:
该webview_flutter
插件不提供获取 WebView 屏幕截图的方法或方法。所以,你可以试试我的插件flutter_inappwebview,这是一个 Flutter 插件,可以让你添加内联 WebView 或打开应用内浏览器窗口,并且有很多事件、方法和选项来控制 WebView。
要截取屏幕截图,您可以使用InAppWebViewController.takeScreenshot
方法截取 WebView 可见视口的屏幕截图(PNG 格式)并返回Uint8List
.
下面是一个示例,它在页面停止加载时截取 WebView 的屏幕截图,并显示带有相应屏幕截图图像的警报对话框:
import 'dart:async';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
Future main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(new MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return MaterialApp(initialRoute: '/', routes: {
'/': (context) => InAppWebViewExampleScreen(),
});
}
}
class InAppWebViewExampleScreen extends StatefulWidget {
@override
_InAppWebViewExampleScreenState createState() =>
new _InAppWebViewExampleScreenState();
}
class _InAppWebViewExampleScreenState extends State<InAppWebViewExampleScreen> {
InAppWebViewController webView;
Uint8List screenshotBytes;
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("InAppWebView")),
body: Container(
child: Column(children: <Widget>[
Expanded(
child: InAppWebView(
initialUrl: "https://github.com/flutter",
initialHeaders: {},
initialOptions: InAppWebViewGroupOptions(
crossPlatform: InAppWebViewOptions(
debuggingEnabled: true),
),
onWebViewCreated: (InAppWebViewController controller) {
webView = controller;
},
onLoadStart: (InAppWebViewController controller, String url) {},
onLoadStop: (InAppWebViewController controller, String url) async {
screenshotBytes = await controller.takeScreenshot();
showDialog(
context: context,
builder: (context) {
return AlertDialog(
content: Image.memory(screenshotBytes),
);
},
);
},
))
])));
}
}
推荐阅读
- python - Amazon Book ISBN 的间歇 BeautifulSoup
- three.js - Three.js OrbitControls - 改变自动旋转方向
- javascript - 云功能完成状态:“崩溃”
- javascript - 为什么 setTimeout(fn, 0) 和 setTimeout(fn, 1) 相同,而 sT(fn, 5) / sT(fn, 6) 不同?
- xcode - ld:在 Xcode 中“存档”时找不到 -lDoubleConversion React Native 0.62.2 的库,但我可以使用 Xcode 构建和运行我的应用程序
- c++ - C++ 标准中的“强制”条件是否总是导致错误?
- python - 如何从熊猫数据框中的列中的每一行中删除重复值
- ios - 如何在 SwiftUI 中实现下拉以关闭模式视图?
- angular - 在 Angular 2+ 中使用 --data-raw 发出一个简单的 http GET 请求
- java - 在 JPA-hibernate 中通过非主键进行一对多关联的任何方式