Image support on Web example

[zambetpentru]

Hi,

I just had to figure out the code to paste a PNG image to the clipboard in Flutter Web, so I thought to share it here for future reference:

import 'dart:html';

import 'package:js/js.dart';
import 'package:js/js_util.dart';
import 'package:flutter_web_plugins/flutter_web_plugins.dart';

    final image = await QrPainter(
      data: "https://www.google.com",
      version: QrVersions.auto,
      errorCorrectionLevel: QrErrorCorrectLevel.Q,
    ).toImageData(400);

    var pngBytes = image!.buffer.asUint8List();

    final clipboard = window.navigator.clipboard as _Clipboard?;
    if (clipboard == null) {
      return;
    }

//DOES not work on Firefox due to limitations in Clipboard API

    final dataMap = <dynamic, dynamic>{
      'image/png': Blob([pngBytes], 'image/png')
    };

    var out = jsify(dataMap);
    final item = _ClipboardItem(out);
    await clipboard.write([item]);




@JS('ClipboardItem')
@staticInterop
class _ClipboardItem {
  external _ClipboardItem(dynamic args);
}

@JS('Clipboard')
@staticInterop
class _Clipboard {}

extension _ClipboardImpl on _Clipboard {
  @JS('read')
  external dynamic _read();
  Future<List<_ClipboardItem>> read() => promiseToFuture<List<dynamic>>(_read()).then((list) => list.cast<_ClipboardItem>());

  @JS('write')
  external dynamic _write(List<_ClipboardItem> items);
  Future<void> write(List<_ClipboardItem> items) => promiseToFuture(_write(items));
}

[zambetpentru]

Any idea why this is working on Mac and Linux Chrome but is giving a black square on Windows Chrome and Edge?