Paste inside a Canvas

Question

There is already a Previous question about it, but it's obsolete. I haven't found any help from dartlang's site or googling around, so here is again the problem.

document.onPaste.listen((e)  {
  //var items = e.clipboardData.getData("image"); 
  var blob = e.clipboardData.items.item(0).getAsFile();
  var reader = new FileReader();
  reader.onLoad.listen((e) {
    var img = new ImageElement()
    ..src = (e.target as FileReader).result;
    img.onLoad.listen((_) {
      mainContext.drawImage(img, 0, 0);
    });
  });
  reader.readAsDataUrl(blob);
});

The "items" was a previous test, while "blob" shouldn't work, because google removed item(). I haven't found any other way to do that. Last possible solution is to look for a javascript library to do that. Note that I'm using the onPaste even on the whole document because on the canvas it wasn't working, at least for me.

If you need this to get an image file into the canvas you could use the onDrop event and drag&drop those files. But if have the same use case as the linked question that's not what you want to do, or do you? — Dennis Kaselow, Dec 04 '13 at 17:34
Use case is a bit similar. People need to be able to see images possibly even from other hosts and apply filters to them. Drag and Drop is cumbersome. Copy an url might be a solution or as last resort is to download a file and upload to my application. — maugch, Dec 04 '13 at 19:44
possible duplicate of [How can I paste an image from the clipboard onto a Canvas element using Dart?](http://stackoverflow.com/questions/17916968/how-can-i-paste-an-image-from-the-clipboard-onto-a-canvas-element-using-dart) — Günter Zöchbauer, Jan 30 '14 at 13:03

Günter Zöchbauer · Answer 1 · 2013-12-04T09:44:00.793

  @DomName('DataTransferItemList.__getter__')
  @DocsEditable()
  @Experimental() // untriaged
  DataTransferItem __getter__(int index) native "DataTransferItemList___getter___Callback";

the only available method to access the Data is private and marked as experimental.

You can star the bugs

I was not able to aquire image data only a path or an url but you can try:

var text = e.clipboardData.getData('text');

When you examine the ClipboardData.types property you may get a format parameter that fits better to your needs.

I will have a look again to getData, but my first experiment with "image" wasn't successfull.. — maugch, Dec 04 '13 at 21:27

score 0 · Accepted Answer · edited May 23 '17 at 12:11

0

The Previous Question I mentioned before is not obsolete anymore. I'm answering my own question to make it more readable than just an edit.

edited May 23 '17 at 12:11

Community

1
1

answered Jan 28 '14 at 10:45

maugch

1,276
3
22
46

Paste inside a Canvas

2 Answers2