How do I save an image of a really long website? Taking about millions of pixels in height

0

0

For my high school graduation, I'd like to make a video telling the story of my class via flying through our Facebook group's posts and highlighting a few of the most important ones.

To do this, I wanted to use one of the many browser extensions that take a screenshot of a website, but all of them either just bug out, or say there's not enough video memory (FireShot), even with only the past 3 months' posts. That's not a huge surprise though, the group has thousands of posts, and if we say a post takes up around 400px, that means the end images would be maybe 10,000,000px large in total.

I then tried to print the page to a PDF, but I just couldn't find a way to get rid of the page breaks—the end result should have no seams at all.

Currently I'm thinking of just getting all data via Facebook's API and writing a program that generates an image from that, resembling Facebook's design. But I thought it'd be wise to ask for alternatives before I resort to that.

(And yes, of course this video could be done with just a tiny bit of visual trickery, with motion blur and stuff, but I just love fidelity even when it's behind the scenes, and I found this problem generally intriguing.)

Edit: Here's a demo of what I'm trying to do. This is only 16k pixels though.

Underyx

Posted 2013-12-10T22:26:41.277

Reputation: 631

You'll fare no better on displaying your mega image than in creating it. And forget .jpg, it's got a 64k limit. In theory .png can handle it but you're looking at something in the 10gigapixel range. – Loren Pechtel – 2013-12-10T22:39:55.140

You might want to try Greenshot. Although what you describe is only supported with Internet Explorer as far as I know.

– Der Hochstapler – 2013-12-10T22:42:08.307

I was hoping I would just figure that part out later on. I'd imagine it wouldn't be that difficult to write a script that splits the image up into smaller reasonably-sized parts, which I can just stitch together in After Effects later. – Underyx – 2013-12-10T22:44:16.063

@OliverSalzburg Thanks! With that, I've successfully generated a 32k pixel high test image. I'm a bit scared though, cause at that point, IE was already starting to get very laggy. The top sticky blue bar on facebook was present every thousand or so pixels on the final image, but I managed to hide it by going into IE's accessibility settings, and loading up a custom CSS file with #pagelet_bluebar {display: none; } in it.

Also, @LorenPechtel, I was very pleasantly surprised that Windows Image Viewer had no problem at all reading this image file, which by the way is only 9 MB. – Underyx – 2013-12-10T23:26:38.533

1Instead of extracting a very large image, why not extract several fragments, and subsequently join them together in the video, using a tool like ffmpeg? This seems more feasible. – Doktoro Reichard – 2013-12-10T23:47:31.740

Doktoro Reichard made a good suggestion. You could also try to use a screen capture utility that supports automatic scrolling of screen elements, for example ACDSee supports such captures. Just select an area of the screen that should be captured and the scrollbar that moves the content of that area. – Andreas – 2013-12-11T03:08:33.380

@mrt ACDSee sounds intriguing, I might go check it out, thanks!

I've also edited my question to add a demo video on what I'm trying to do, only with a lot more content. – Underyx – 2013-12-11T04:04:47.660

@DoktoroReichard That would be a great way to go, if I could automate the process of joining them in Adobe After Effects. Not sure how to do that, though. – Underyx – 2013-12-11T04:05:26.723

@Underyx Sorry I confused application names: I was talking about SnagIt, which is a screen capture utility. ACDSee is a tool to manage images of all kinds. I shouldn't post before 5 a.m. – Andreas – 2013-12-11T06:15:53.500

Instead of extracting a very large image, why not extract several fragments, and subsequently join them together in the video, using a tool like ffmpeg? This seems more feasible. @DoktoroReichard, because as he said, he wants to have a screenshot of the whole thing, then “fly” through it, highlight select posts as they pass over. Capturing a few fragments and sticking them together would make it small and lifeless. – Synetech – 2013-12-17T02:36:20.710

@Synetech I think you misunderstood me. Instead of having the problem of dealing with a very very large file, you can do some "creative editing" and sequence those fragments, in order to do something similar to the example given. I'm not a video wiz, otherwise I would have suggested a concrete solution. – Doktoro Reichard – 2013-12-17T02:46:23.553

They still need a picture of the entire page one way or another. If you mean splitting the whole page up into segments (e.g., snapshot, scroll-down, snapshot, scroll down, etc.), then that is awful. Even with a medium-length page, that is a huge pain because you have to manually take numerous screenshots, then edit each to contain only the page (no browser chrome, Windows taskbar, etc.), and then manually align each segment to overlap with pixel-perfect precision. It’s a nasty job, I know because I’ve done it. Extensions automate all this, but unfortunately they struggle with large pages. – Synetech – 2013-12-17T02:53:27.607

Answers

2

Have you tried the built in, firefox console screenshot tool? If firefox will render it, you should be able to screenshot it. In firefox hit shift -f2 and then type in screenshot --fullpage bigpicture.png

Alternately you can capture just what's on the screen without the --fullpage and scroll for the next page and use a image editor to join them together as needed

I don't have an insanely long page to test it on, but I suppose it should work.

Journeyman Geek

Posted 2013-12-10T22:26:41.277

Reputation: 119 122

Whoa, I never even knew this existed, thanks a lot, I'll give this a try tomorrow! – Underyx – 2013-12-11T04:00:18.127

Awesome, very handy tool! +1 – Andreas – 2014-01-08T12:32:24.693

0

Depending on what you mean by "flying through", Jing sounds like it would work quite well for your situation. It has a simple user interface for recording video screencasts. If you store the file locally (as opposed to being hosted on the internet or a network drive), there should be no lag viewing the finished video product. It's free to try out and see if it fits the bill. I've used it for 5-10 minute clips, and while it might bog down a bit when creating, it's great for recording and later viewing what's on your screen.

I would suggest going to each of the posts first, in the order you want them to display, so that images are cached and pageloads are faster. This way you can also easily tour through things just by backing up to the beginning and hitting the forward button of your browser.

Dallas

Posted 2013-12-10T22:26:41.277

Reputation: 223

Sorry, that won't quite cut it, here's what I am trying to do, but with around 30 times the length.

– Underyx – 2013-12-11T04:01:33.397

I did add that first qualifier for a reason, as I thought you might be alluding to something like this. Cool idea BTW. If you can find a way to create the effect, the screencast might still have value for playback, rather than individual images bogging you down. – Dallas – 2013-12-11T04:08:35.680

Asked: 2013-12-10T22:26:41.277

Viewed: 493 times

Active: 2013-12-11T04:06:16.163