SachinGanesh/screenshot

Not working On Live Site (Flutter Web) : " toImage is not supported on the Web"

Opened this issue · 2 comments

working fine on Flutter local web But not working on Live web Error => " Error on saveImage: Unsupported operation: toImage is not supported on the Web "

yes your'e right its not working with HTML renderer on release.
I tried the example code, and it didn't work with the CanvasKit release either. However,
I've updated the code, and it's working perfectly with the CanvasKit release now.

import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:screenshot/screenshot.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(title: 'Screenshot Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ScreenshotController screenshotController = ScreenshotController();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(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: Stack(
                    children: [
                      Image.asset('assets/images/flutter.png'),
                      const Text("This widget will be captured as an image"),
                    ],
                  )),
            ),
            const SizedBox(height: 25),
            ElevatedButton(
                child: const Text(
                  'Capture Above Widget test 2',
                ),
                onPressed: () {
                  screenshotController.capture(delay: const Duration(milliseconds: 10)).then((capturedImage) {
                    if (capturedImage != null) {
                      ShowCapturedWidget(context, capturedImage);
                    } else {
                      print("Failed to capture image.");
                    }
                  }).catchError((onError) {
                    print("Error capturing image: $onError");
                  });
                }),
          ],
        ),
      ),
    );
  }

  Future<dynamic> ShowCapturedWidget(BuildContext context, Uint8List capturedImage) {
    return showDialog(
      useSafeArea: false,
      context: context,
      builder: (context) => Scaffold(
        appBar: AppBar(
          title: const Text("Captured widget screenshot"),
        ),
        body: Center(child: Image.memory(capturedImage)),
      ),
    );
  }
}

I hope this helps!

here is the command to test it.:

flutter run -d web-server --web-renderer canvaskit --release --web-port 8001