如何使用Dart将剪贴板中的图像粘贴到Canvas元素上?

时间:2013-07-29 05:59:54

标签: html5 image dart clipboard paste

我正在使用Dart开发个人白板Chrome应用程序,有时可以快速复制和粘贴图像(例如演示文稿中的幻灯片,图表或讲义),以便我可以添加备注在教授课堂或进行演示时,在图像上。

如何将存储在剪贴板上的图像粘贴到Dart中的画布元素上?

1 个答案:

答案 0 :(得分:5)

实际上,this answer to the same question for JS几乎可以直接应用。 Dart翻译可能类似于:

import 'dart:html';

void main() {
  var can = new CanvasElement()
    ..width = 600
    ..height = 600
  ;

  var con = can.getContext('2d');

  document.onPaste.listen((e) {
    var blob = e.clipboardData.items[0].getAsFile();
    var reader = new FileReader();
    reader.onLoad.listen((e) {
      var img = new ImageElement()
        ..src = (e.target as FileReader).result;
      img.onLoad.listen((_) {
        con.drawImage(img, 0, 0);
      });
    });
    reader.readAsDataUrl(blob);
  });

  document.body.children.add(can);
}