JointJS+ Raster

format.Raster

This plugin adds new methods to the joint.dia.Paper object for exporting paper to PNG and JPEG raster formats on the client side:

toPNG(callback[, options])	Executes the callback function with a PNG data URI representing the content of the paper as the first parameter. The second parameter is an optional error in the case something happened during the processing.
toJPEG(callback[, options])	Executes the callback function with a JPEG data URI string representing the content of the paper as the first parameter. The second parameter is an optional error in the case something happened during the processing.
toDataURL(callback[, options])	The general version of two previous methods. Executes the callback function with a data URI string representing the content of the paper in specified MIME type as the first parameter. The second parameter is an optional error in the case something happened during the processing.
toCanvas(callback[, options])	Executes the callback function with a HTMLCanvasElement of applicable parameters from the paper as the first parameter. The second parameter is an optional error in the case something happened during the processing.

The available options are:

width	number	Set the width of the image in pixels.
height	number	Set the height of the image in pixels.
size	number	Size multiplier for generating raster images in a higher resolution. It expects a string in the form of `[Number] + 'x'` describing how many times the image width and height should be multiplied. It defaults to `'1x'`.
backgroundColor	string	The image background color.
padding	number \| object	The space between the image border and the image content. It can also be an object with `left`, `top`, `right` and `bottom` properties.
type	string	The standard MIME type for the image format to return (only applies to `toDataURL()`).
quality	number	The quality level of a JPEG image compression in the range of 0.0 to 1.0 (only applies to `toJPEG()`).
area	g.Rect	An area which should be displayed in the resulting raster image. The value is an object with `x`, `y`, `width` and `height` properties, describing the origin and size of a rectangular area on the paper in the local coordinates. It defaults to the paper content bounding box - `paper.getContentBBox()` transformed into the local coordinates. This is the same behaviour as area in `paper.prototype.toSVG()`. `// Export selected elements only and add a padding var padding = 20; paper.toPNG(callback, { area: graph.getCellsBBox(selection.collection.toArray()).inflate(padding) });`
useComputedStyles	boolean	The same behaviour as useComputedStyles in `paper.prototype.toSVG()`.
stylesheet	string	The same behaviour as stylesheet in `paper.prototype.toSVG()`.
beforeSerialize(SVGDocument, paper)	function	The same behaviour as beforeSerialize in `paper.prototype.toSVG()`.
fillFormControls	boolean	The same behaviour as fillFormControls in `paper.prototype.toSVG()`.

Note an exception 'dia.Paper: raster size exceeded' can be thrown if the raster size reaches the browser limits. In that case the raster size / resolution can be lowered through the size option e.g { size: '.5x' }.

Installation

Include joint.format.svg.js and joint.format.raster.js file into your HTML:

<script src="joint.format.raster.js"></script>

(Note that this plugin requires the SVG Export.)

To get the plugin to work across all modern browsers include also canvg library and its dependencies. All these files are part of the JointJS+ toolkit, in the Raster/lib directory:

<script src="format/Raster/lib/rgbcolor.js"></script>
<script src="format/Raster/lib/StackBlur.js"></script>
<script src="format/Raster/lib/canvg.js"></script>

Usage

paper.toPNG(function(imageData) { sendToServer(imageData); });

paper.toJPEG(function(imageData) { offerForDownload(imageData); }, {
    width: 640,
    height: 320,
    quality: 0.7
});