Question

I fetch a URL into an IFRAME, and now would like to capture a thumbnail of the result to later show the user the links they have followed.

void receiveHtml(Event e) {
  ...
  iframe.convertToImage... // <----- ????? How to do this?
}

IFrameElement iframe = query('#iframehtml') as IFrameElement;
...
iframe.on.load.add(receiveHtml);
...
iframe.src = url; // E.g. url='http://someplace.com/dir/'

Is there a way in DART to capture the iframe document to an image? (which I can then shrink to a thumbnail and store for later).

Answer 1

You can’t do this on the client-side, at least not without the iframe being in the same origin (“the same website”). Otherwise, it would be a security risk, because it opens the door to many possibilities like screenshotting a bank website with the user’s bank account details.

However, you could do this on the server side, but it does not get much easier.

One thing you could do is to install webkit2png and let it make screenshots of websites. You could just call it something like this:

import 'dart:io';

main() {
  Process.run('python', ['/path/to/webkit2png', 'http://google.com']).then((result) {
    // Here you can open and do whatever you want with the screenshots.
    // The files are placed in the current directory.
    print(new File('somescreenshot.png').readAsBytesSync());
  });
}