网站截图

Question

我想知道如何用flutter web截图小部件。我已经尝试了包命名为截图，但它似乎不工作在网络上。有人知道我怎么做吗?

Answer 1

你试过了吗?

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:screenshot/screenshot.dart';
// import 'package:webview_flutter/webview_flutter.dart';
// import 'package:image_gallery_saver/image_gallery_saver.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
textTheme: TextTheme(
headline6: TextStyle(
color: Colors.yellow,
fontSize: 50,
)),
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Screenshot Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
//Create an instance of ScreenshotController
ScreenshotController screenshotController = ScreenshotController();
@override
void initState() {
// if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
super.initState();
}
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Screenshot(
controller: screenshotController,
child: Container(
padding: const EdgeInsets.all(30.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent, width: 5.0),
color: Colors.amberAccent,
),
child: Text("This widget will be captured as an image")),
),
SizedBox(
height: 25,
),
ElevatedButton(
child: Text(
'Capture Above Widget',
),
onPressed: () {
screenshotController
.capture(delay: Duration(milliseconds: 10))
.then((capturedImage) async {
ShowCapturedWidget(context, capturedImage!);
}).catchError((onError) {
print(onError);
});
},
),
ElevatedButton(
child: Text(
'Capture An Invisible Widget',
),
onPressed: () {
var container = 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",
style: Theme.of(context).textTheme.headline6,
));
screenshotController
.captureFromWidget(
InheritedTheme.captureAll(
context, Material(child: container)),
delay: Duration(seconds: 1))
.then((capturedImage) {
ShowCapturedWidget(context, capturedImage);
});
},
),
],
),
),
);
}
Future<dynamic> ShowCapturedWidget(
BuildContext context, Uint8List capturedImage) {
return showDialog(
useSafeArea: false,
context: context,
builder: (context) => Scaffold(
appBar: AppBar(
title: Text("Captured widget screenshot"),
),
body: Center(
child: capturedImage != null
? Image.memory(capturedImage)
: Container()),
),
);
}
// _saved(File image) async {
//   // final result = await ImageGallerySaver.save(image.readAsBytesSync());
//   print("File Saved to Gallery");
// }
}

不要忘记运行flutter pub add screenshot

Answer 2

对于那些想要截图并在Web上下载它的人可以使用下面的代码片段。如有疑问，请注释。

import 'dart:html' show AnchorElement;
import 'dart:ui' as ui;

Future<void> downloadScreenshotFn() async {
final BuildContext? currentContext = screenshotKey.currentContext;
if (currentContext == null) {
return;
}
final RenderRepaintBoundary? boundary =
currentContext.findRenderObject() as RenderRepaintBoundary?;
if (boundary == null) {
Widgets.showToast('Unable to share! Please take a screenshot');
return;
}
final ui.Image image = await boundary.toImage(pixelRatio: 2);
final ByteData? byteData = await image.toByteData(format: ui.ImageByteFormat.png);
final Uint8List pngBytes = byteData!.buffer.asUint8List();
try {
AnchorElement()
..href = Uri.dataFromBytes(pngBytes, mimeType: 'image/png').toString()
..download = 'Photo.png'
..style.display = 'none'
..click();
} catch (e) {
print('error while Downloading: $e');
}
}