Rendering URL fails

[javismiles]

Hi :) im trying to render a web page in large size, but the code doesnt work for me, im including rasterizeHTML.allinone.js ,declaring a Canvas ,and Calling: rasterizeHTML.drawURL("http://cnn.com", canvas, {cache: false, executeJs: true});

any tips?

[javismiles]

Basically nothing happens, comes out blank, i want to see how rasterizeHTML.js renders a complex web page , thank you

[cburgmer]

Hi, this is somewhat covered under https://github.com/cburgmer/rasterizeHTML.js#limitations, although not very clearly (I will update). Basically JS (and with that rasterizeHTML.js) is not allowed to access foreign resources (everything outside of the domain that is currently displayed), unless techniques like CORS are used.

So your example won't work, unless the code is executed from a page under cnn.com.

If you just need an example, http://cburgmer.github.io/rasterizeHTML.js/ renders itself.

[javismiles]

Thank you very much for the quick answer, well i guess its not a big problem as one can call oneself to render the page itself as you indicated. Another thing, what if i want to render the page in 3 or 5 times larger size, is that possible? or rendering can only be done at the same size than the page is currently being displayed? best

[cburgmer]

For larger size: There was a similar question recently in issue #48. Does that help? See the link there to the retina example scales the image to 2x to get a higher resolution.

[javismiles]

interesting, that's very good, now all the examples i see are of very simple html, do you have an example with a complex web page say of the type of cnn.com , not like cnn.com but i mean, a complex web page, lots of styles, many images, svg filters applied to images maybe, in any case something more complex, im trying to understand how far can the library go, will it render for example as much complexity as slimerjs/phantomjs do

[cburgmer]

For the scaling re more complex web pages, I haven't really thought about how to scale existing pages. Maybe sticking to CSS transforms, but working on the generated SVG element itself? This would require you to dig a bit into the code yourself.

If you want to play around further with big pages you can download a full page via e.g. wget -e robots=off --wait 0.25 --limit-rate=80k -E -k -p --span-hosts --directory-prefix="github" http://github.com and thus provide the content locally. This circumvents the same origin policy issues.

I am using the above method in the test suite of rasterizeHTML.js to ensure things don't break (see test/inlineIntegration/compileTestPageData.sh). I am checking constantly against the Github and (all though currently disabled) against the Twitter front pages.

[cburgmer]

By changing line https://github.com/cburgmer/rasterizeHTML.js/blob/master/src/render.js#L132 to '<foreignObject width="100%" height="100%" style="transform: scale(2, 2);">' + I can scale up the whole page.

This obviously needs more work as the content now gets clipped off to the bottom and right.

Can you describe your use case? If zooming is something people need this could make it into the code base as a feature.

[cburgmer]

I have implemented a simple zoom option to allow the scaling of content now documented in https://github.com/cburgmer/rasterizeHTML.js/wiki/API. Not sure if that's what you were looking for, but it was a fun enough thing to implement, so I went ahead. Feel free to close this issue when your questions are answered.

[javismiles]

thank you very much , i will test all this and report back have great day Jav

On Sat, Mar 29, 2014 at 8:38 AM, Christoph Burgmer <notifications@github.com

wrote:

I have implemented a simple zoom option to allow the scaling of content now documented in https://github.com/cburgmer/rasterizeHTML.js/wiki/API. Not sure if that's what you were looking for, but it was a fun enough thing to implement, so I went ahead. Feel free to close this issue when your questions are answered.

Reply to this email directly or view it on GitHubhttps://github.com/cburgmer/rasterizeHTML.js/issues/56#issuecomment-38999056 .

[cburgmer]

Closing the issue for now. If there's something left we haven't covered, please open a new issue.