| 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.
|