1 | ## jquery.flot.composeImages.js
|
2 |
|
3 | This plugin is used to expose a function used to overlap several canvases and
|
4 | SVGs, for the purpose of creating a snaphot out of them.
|
5 |
|
6 | ### When composeImages is used:
|
7 | When multiple canvases and SVGs have to be overlapped into a single image
|
8 | and their offset on the page, must be preserved.
|
9 |
|
10 | ### Where can be used:
|
11 | In creating a downloadable snapshot of the plots, axes, cursors etc of a graph.
|
12 |
|
13 | ### How it works:
|
14 | The entry point is composeImages function. It expects an array of objects,
|
15 | which should be either canvases or SVGs (or a mix). It does a prevalidation
|
16 | of them, by verifying if they will be usable or not, later in the flow.
|
17 | After selecting only usable sources, it passes them to getGenerateTempImg
|
18 | function, which generates temporary images out of them. This function
|
19 | expects that some of the passed sources (canvas or SVG) may still have
|
20 | problems being converted to an image and makes sure the promises system,
|
21 | used by composeImages function, moves forward. As an example, SVGs with
|
22 | missing information from header or with unsupported content, may lead to
|
23 | failure in generating the temporary image. Temporary images are required
|
24 | mostly on extracting content from SVGs, but this is also where the x/y
|
25 | offsets are extracted for each image which will be added. For SVGs in
|
26 | particular, their CSS rules have to be applied.
|
27 | After all temporary images are generated, they are overlapped using
|
28 | getExecuteImgComposition function. This is where the destination canvas
|
29 | is set to the proper dimensions. It is then output by composeImages.
|
30 | This function returns a promise, which can be used to wait for the whole
|
31 | composition process. It requires to be asynchronous, because this is how
|
32 | temporary images load their data.
|