Moyo: 画像をクリップボードにコピーできるようにする（base64形式で）

October 12, 2019

引き続き暇な時はMoyoプロジェクトをいじっています。

せっかく書いた画像を保存したいな、と思ったので、クリップボードにコピーする機能を付けてみました。
（画像データそのままはクロスプラットフォームで動く気がしなかったのでbase64で。結局Webで動かなかったのですが…）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

  GlobalKey globalKey = GlobalKey();

  Future<void> _copyToClipboard() async {
    final RenderRepaintBoundary boundary =
        globalKey.currentContext.findRenderObject();
    final ui.Image image = await boundary.toImage();
    final ByteData byteData =
        await image.toByteData(format: ui.ImageByteFormat.png);
    final Uint8List pngBytes = byteData.buffer.asUint8List();
    final String base64 = base64Encode(pngBytes);

    final ClipboardData data =
        ClipboardData(text: 'data:image/png;base64,$base64');
    await Clipboard.setData(data);
  }

保存したいWidgetを RepaintBoundary で囲んでおきます。

1
2
3
4

      body: RepaintBoundary(
        key: globalKey,
        child: _buildBody(),
      ),

これでこんな感じの画像が保存できました。

toImageの使い方は、公式ドキュメントを参考にしました。（ほぼそのまま）

https://api.flutter.dev/flutter/rendering/RenderRepaintBoundary/toImage.html

ただ、まだWebでは動かないようです。（以下のエラーが発生）

Uncaught Unsupported operation: toImage is not supported on the Web

また、Widgetの状態によっては保存できない場合もあるようです。（以下のエラーが発生するWidgetがある）

Unhandled Exception: Exception: Invalid image dimensions.

このあたりはまだ、1つのソースでWebも動く、というわけにはいかなそうです。

CATALOG
    LINKS