Turn Habr into "tag" using Canvas

Good afternoon, dear visitors Habr.

I want to share with you my small script that can be used using the Bookmarklet technique on almost any site. So…
')

What is it?

As you can see from the title, this is the game "tag". A feature of this game is that it uses the current visible image of the page. During the development, the library used html2canvas by Nicholas von Herzen (Niklas von Hertzen), which allows you to take a screenshot in the browser on the user's side, and place the result on canvas. It is this image (or part of it) that will be the source for the Fifteen game board.

Why is this?

As they say, just for fun. Just because of the alteration on one of my sites, I wanted to embed some Easter egg into the site. Initially, the idea was that the site “crumbled” from the screen after a certain time or click in some special place. But then I thought that interactivity, which requires user actions, will be somewhat more interesting. The choice fell on the tag.

How it works?

As already mentioned, the game uses the html2canvas library to create screenshots in the user's browser. The library is written in pure JavaScript, but incorporates the jQuery plugin, which I used.

The basic use of the library is extremely simple:

$(element).html2canvas({
onrendered: function(canvas) {
// ...
}
});


As a parameter, the newly created canvas is passed to the callback function.

The script I created is essentially a jQuery plugin. Calling him is very simple:

$('body').puzzle15({
tileCount: 4
});


At the same time, not only body can be a selector, but practically any element as well. However, working with something different from the body has hardly been tested. I would be happy to bug reports and constructive criticism. Just in case, I will clarify that only the first element of the set is taken, so the tags on the screen will be only one, despite the selector. In this case, the entire visible surface of the element is used to generate the playing field, no matter how large (or small) it is. In order to not peep the original element, an additional div substrate is used.
If you use body for the game, then unlike the one described above, only the part visible on the screen will be used for the playing field. And in order that the user could not twist up or down, scrolling is turned off and a fixed position is set for the playing field. However, any window resizing handling is missing. The way to turn off the scrolling I spied here .

I don’t see much sense in describing how the "tags" are arranged, since I already had it on Habré, and I don’t have much to do with the subject matter. Well, in general, the code is quite simple, contains small comments, so there should be no understanding of the problems. Nevertheless, I am ready to answer questions and participate in constructive discussions.

I want to play already. Where to click?

To install this game, you need to go here and move the link html2canvas + puzzle 15 to the bookmarks bar. After you have moved it, open any site (for example, habrahabr.ru) and call the bookmarklet. In the window that appears, you will need to enter the field dimension.
Immediately I want to warn Opera users : On long pages, Opera terribly slows down while taking a screenshot, but then it still works correctly. I tested in FF, Chrome, Safari, IE9 and Opera, but only in the latter such a problem arose. I think if the library could take only partial screenshots, then the hang could be avoided. In general, if that I warned you.

Where to download the source?

The full archive, including the bookmarklet, can be downloaded from this link .
The sources of the html2canvas library can be downloaded on github .

upd: I noticed that the script does not work on Yandex. In order to avoid problems with this and other sites, I have disabled in the script the proxying of pictures that are not suitable for the same origin policy. The fact is that proxying is processed by default on the developer’s side of html2canvas, and the script sometimes crashes there.
upd2: Some pages that are too long may have the error NS_ERROR_OUT_OF_MEMORY: Component returned failure code: 0x8007000e (NS_ERROR_OUT_OF_MEMORY) [nsIDOMHTMLCanvasElement.height]. Alas, since there is no way to limit the area in the body, the error can not be avoided.