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