javascript - Convert html to image (take a snapshot of dom) -
we have use case want take image of content within rich text editor (ckeditor). using html2canvas (http://html2canvas.hertzen.com/) works fine extent below issues facing:
a)html2canvas needs proxy (wrote own proxy in java) server fetch images if html has images hosted on different server( proxy required due cross domain restrictions), have run issues process of taking image/snapshot takes lot of time when there lot of images hosted on different server. time take images effected if url's broken.
i wondering if there reliable solution taking images/snapshots of dom elements has cross browser compatibility , fast.
below research did on alternatives need advice.
phantomjs: looked @ phantomjs allows taking images outside browser world if felt using phantomjs might on doing requires lot of build setup , whole different library include.
svg based solution: ran link (https://developer.mozilla.org/en-us/docs/web/api/canvas_api/drawing_dom_objects_into_a_canvas) shows taking snapshot using svg element. not sure cross browser compatibility , how handle externally hosted images.
phantomjs great, api verbose. if want use phantomjs friendly interface casperjs.
you can capture website easily:
casper.start('http://www.google.fr/', function() { this.capture('google.png', { top: 100, left: 100, width: 500, height: 400 }); }); casper.run();
Comments
Post a Comment