Develop Reference

Take a huge screenshot of a webpage (over 13500x13500px size)

I have about 3000 images of about 256x256px size (but some are 50x256 and some are 256x100 or so) which I wish to merge into one big picture. The images are shown in a webpage, thus the easiest way would be to take a screenshot of the said webpage. The webpage's image is of about 13500x13500px ! On theory, I could download all of the images and merge them together (with like bitmap() or CopyImage() or something like that but I really wish to go with an easier solution). Oh and this 3000->1 is one of about 120 in total cases that I have to do.
I've tried several methods, none of which worked out properly:
phantomJS (the .exe crashes after a while)
CutyCaps (the .exe crashes after a while)
Firefox's "screenshot --fullpage bla.png" (crashes with exception,
known issue with huge pages since the dawn of firefox)
SeleniumSDK (FirefoxDriver, crashes after a while)
html2canvas (crashes or just won't start)
basic javascript and canvas work (failed miserably)
A dozen of the top extensions for firefox (takes forever, then
crashes or produces a broken image)
A dozen of the top extensions for Chrome (takes forever, then
crashes or produces a broken image)
The only service that ever worked out perfectly was http://web-capture.net but I really wish to have an offline/local method to generate the image, due to the amount of times that I'd have to visit any 3th party website.
If anyone could point me to any better offline service or a solution, I would be very grateful. Any working code snippets (preferably in either php/javascript/java/selenium/c#) are highly appreciated.
More on the project itself:
The source data is a photograph of a cell, shown with LeafletJS (similar to GoogleMaps). I made up a web scraper of sort, which pulls all the data from the viewer page and shows them as a one huge picture, formed out of thousands of other smaller images (with sometimes different sizes). The Histology course has about 120 different images that I'd wish to have locally stored, hence this whole exercise. Also, to make stuff interesting, every image is of different size, but lets say that it has about 55-60 columns and 50-80 rows of small 256x256 images, forming the big picture.
Here is a preview of what I'm talking about:
http://89.215.196.209/Anatomy%20%28Histology%29%20data%20parser.htm
Sorry for the long post, have a cookie.

I actually just installed and checked out the 64x ver of wkhtmltoimage and it works out perfectly.

Chrome Canary, GPU process memory leak on canvas image downscaling with antialiasing

I'm bulding a website where I use canvas to display images. I have a simple logic which allows canvas resizing and rotating. However, most of the time the original image is much larger than actual canvas size so I use downscaling algorithm which give me better canvas image quality than what I can get by simply using what browser has for it.
But I have a huge memory leak at Google Chrome 41.0.2249.0 Canary (64-bit) (and maybe at Samsung Galaxy 5S stock browser - not sure if it is the same issue, but looks very similar) when I'm using this particular antialiasing algorithm. It looks like some image-related data is not going out of memory after every antialiased canvas redraw.
There is no memory issues on my other browsers - Google Chrome 39.0.2171.71 m, Firefox 34.0.5 and IE11.
jsFiddle:
with antialiasing (may consume up to 900Mb of RAM after performing a lot of redraws):
http://jsfiddle.net/giperon/pb5rjzuk/1/embedded/result/
without antialiasing (almost no change in RAM consumption):
http://jsfiddle.net/giperon/4smhvrf3/embedded/result/
P.S.
I also had a version which reuses single Image instance, like it is reccomended here - https://stackoverflow.com/a/26297202/682501 and I still see the memory overuse.

Chrome and SVG (Raphael), trouble with drawing "off-screen"

I'm working on a prototype system which will act as a proof of concept that an existing system can be made a lot more interactive.
It basically emulates our main software package but over the internet using JSONP requests to update a load of images and Raphael vectors to make it look like everything's running.
I'm having trouble on Chrome however with Raphael not drawing vectors "off-screen". What I mean by "off-screen" is that the main app runs through an iframe as it relies on cross-domain long poll comet through AJAX to get communicate back and forth. Below is an image demonstrating what I mean.
Here I've scrolled a long a little bit in the iframe to look at the bits "offscreen" and you can hopefully see that the grey arrows aren't rendered. I've used Chrome's developer tools to highlight over the SVN tag, showing that it's only given 450px by 810px to the SVG tag, which is the same size allocated for the iframe.
It's worth pointing out that it renders fine in Firefox. Any ideas?

I've had a similar problem and found a bug report for the WebKit project that seemed related:
https://bugs.webkit.org/show_bug.cgi?id=64823
According to the comments, it's a bug in the rendering engine and there's no workaround aside from losing the iframe or resorting to other means of scrolling the SVG viewport (like moving all the elements within the SVG element).
On the upside, version 16.0.912.21 has been released to the beta channel today and it seems that the bug has been fixed. I've also checked the latest chromium build (17.something) and the bug hasn't resurfaced. I'm guessing the fix should find its way into the stable channel in a couple of weeks.

Internet Explorer unwanted artifact on images when using javascript slideshow

We're having the following weird (well...) behavior in all versions of Internet Explorer browsers when using javascript slideshows.
You can see what I mean here http://www.tospirto.net/index.php?ID=photo_gallery&Rec_ID=481
In the last 3 images there are white lines and artifacts created by the browser.
This is true as I said for all versions of Internet Explorer.
Have you seen this before??
Do you ave any idea what is causing this???
Thank you

I can see the artifacts - strange! This is a known issue in IE's JPEG rendering algorithm. If you enlarge the pictures in Photoshop, you will see that the artifacts are restricted within encoding blocks. (Pardon me, but I assume you know roughly how JPEG is encoded.)
Try encoding the images with a different quality, or even in a different format (like PNG, even though that would give you larger files). You can find other thoughs on how to solve this here:
http://forum.jquery.com/topic/ie-dead-pixels-when-fading-images

It's a bug in the alpha filter, which is how transparent fades are implemented in IE (before version 9, which finally supports proper CSS opacity). When used directly on an image, any pixel with the RGB values 2,5,10 (aka #02050A) is treated as transparent.
This is how 1-bit transparency from eg. GIF is implemented in the alpha filter. Evidently Microsoft think this particular colour is so seldom used no-one will notice. Oops.
Avoid the bug by putting the alpha filter (or fade script that uses it) on a container <div> instead of on the image itself.
Alternatively, you can use an AlphaImageLoader filter (same hack as for transparent PNG loading on IE6) to load the image, or just get rid of the alpha filter when you're not in the middle of a fade (you still see the bug during fade but at least it doesn't appear at 100%).

OK I found what was wrong after some searching.
The effect is called swiss army image artifacts and you can find more about it here: http://www.dynamicdrive.com/forums/showthread.php?t=34462
Another great bug from explorers :)
The solution is on the referenced article which is to remove absolute blacks using the levels tool on the photoshop for example. Did a batch change using actions in photoshop for all pictures and works like a charm.

Recording and storing high-res hand drawing

Are there any advanced solutions for capturing a hand drawing (from a tablet, touch screen or iPad like device) on a web site in JavaScript, and storing it on server side?
Essentially, this would be a simple mouse drawing canvas with the specialty that its resolution (i.e. the number of mouse movements it catches per second) needs to be very high, otherwise round lines in the drawing will become "polygonal" when moving the pen / mouse fast:
(if this weren't the case, the inputDraw solution suggested by #Gregory would be 100% perfect.)
It would also have to have a high level of graphical quality, i.e. antialias the penstroke. Nothing fancy here but a MS Paint style, 1x1 Pixel stroke won't cut it.
I find this a very interesting thing in general, seeing as Tablet PCs are becoming at least a bit more common. (Not that they get the attention I feel they deserve).
Any suggestions are highly appreciated. I would prefer an Open Source solution, but I am also open to proprietary solutions like ActiveX controls or Java Applets.
FF4, Chrome support is a must; Opera, IE8/9 support is desired.
Please note that most "canvas" libraries around, and most answers to other questions similar to mine, refer to programmatically drawing onto a canvas. This is not what I am looking for. I am looking for something that records the actual pen or mouse movements of the user drawing on a certain area.
Starting a bounty out of curiosity whether anything has changed during the time since this question was asked.

I doubt you'll get anything higher resolution than the "onmousemove" event gives you, without writing an efficient assembler program on some embedded system custom built for the purpose. You run inside an OS, you play by the OS's rules, which means you're limited by the frequency of the timeslices an OS will give you. (usually about 100 per second, fluxuating depending on load) I've not used a tablet that can overcome the "polygon" problem, and I've used some high end tablets. Photoshop overcomes the problem with cubic interpolation.
That is, unless, you have a very special tablet that will capture many movement events and queue them up to some internal buffer, and send a whole packet of coordinates at a time when it dispatches data to the OS. I've looked at tablet api's though, and they only give one set of coordinates at a time, so if this is going to happen, you'll need custom hardware, and a custom driver, and custom apis that can handle packets of multiple coordinates.
Or you could just use a damned canvas tag, the onmousemove event, event.pageX|pageY some cubic interpolation, the "toDataURI" api of canvas, post the result to your php script, and then just say you did all that other fancy stuff.
onmousemove, in my tests, will give you one event per pixel of movement, limited only by the speed of the event loop in the browser. You'll get sparse data points (polygons) with fast movement and that's as good as it gets without a huge research grant and a hardware designer. Deal.

there are some applets for this in the oekaki world: Shi painter, Chibipaint or PaintBBS. Here you have php classes for integration.
Drawings produced by these applets can have quite good quality. If you register in oekakicentral.com you can see all the galleries and some drawings have an animation link that shows how was it drawn (it depends on the applet), so you can compare the possibilities of the applets. Some of them are open source.
Edit: See also this made in HTML 5.

Have a look at <InputDraw/>: a flash component that turns freehand drawing into SVG. Then you could send back the generated SVG to your server.
It's free for non commercial use. According to their site, commercial use price is 29€. It's not open source though.
IMHO it's worth a look.
Alternatively, you implement something based on svg-edit which is open source and uses jQuery (demo). If requires the Google Frame Plugin for IE6+ support though.
EDIT: I just found the svg-freehand-signature project (demo) that captures your handwritten signature and sends it to a server as a SVG using POST. It's distributed as a straight-forward and self-contained zip (works out of the box with Safari and Firefox, you may want to combine it with svgweb that brings SVG support to Internet Explorer).
EDIT: I successfully combined Cesar Oliveira's canvaslol (just look at the source of the page to see how it works) with ExplorerCanvas to have something on IE. You can also have a look at Anne van Kesteren's Paintr experiment.

markup.io is doing that with an algorithm applied after the mouseup.
I asked a similar question recently, and got interesting but not satisfying answers: Is there any way to accelerate the mousemove event?