Skip to main content
Version: 4.1

Raster

Exports the Paper to PNG and JPEG raster formats. Learn more about the Raster plugin.

Functions​

toPNG()​

toPNG(
paper: dia.Paper,
callback: (dataURL: string, error?: Error) => void,
opt?: RasterExportOptions
): void;

Executes a callback function with a PNG data URI representing the content of the paper as the first parameter. The second parameter of the callback is an optional error in case something happened during processing.

toJPEG()​

toJPEG(
paper: dia.Paper,
callback: (dataURL: string, error?: Error) => void,
opt?: RasterExportOptions
): void;

Executes a callback function with a JPEG data URI string representing the content of the paper as the first parameter. The second parameter of the callback is an optional error in case something happened during processing.

toDataURL()​

toDataURL(
paper: dia.Paper,
callback: (dataURL: string, error?: Error) => void,
opt?: RasterExportOptions
): void;

The general version of two previous methods. Executes a callback function with a data URI string representing the content of the paper in specified MIME type as the first parameter. The second parameter of the callback is an optional error in case something happened during processing.

toCanvas()​

toCanvas(
paper: dia.Paper,
callback: (canvas: HTMLCanvasElement, error?: Error) => void,
opt?: CanvasExportOptions
): void;

Executes a callback function with a HTMLCanvasElement of applicable parameters from the paper as the first parameter. The second parameter of the callback is an optional error in case something happened during processing.

Configuration​

The following properties are available in the options object opt:

width​

Set the width of the image in pixels.

height​

Set the height of the image in pixels.

size​

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​

The image background color.

padding​

The space between the image border and the image content. It can also be an object with left, top, right and bottom properties.

type​

The standard MIME type for the image format to return (only applies to toDataURL()).

quality​

The quality level of a JPEG image compression in the range of 0.0 to 1.0 (only applies to toJPEG()).

area​

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 local coordinates. It defaults to the paper content bounding box - paper.getContentBBox() transformed into local coordinates. This is the same behaviour as area in paper.prototype.toSVG().

// Export selected elements only and add a padding
const padding = 20;
toPNG(paper, callback, {
area: graph.getCellsBBox(selection.collection.toArray()).inflate(padding)
});

useComputedStyles​

The same behaviour as useComputedStyles in paper.prototype.toSVG().

stylesheet​

The same behaviour as stylesheet in paper.prototype.toSVG().

beforeSerialize​

type BeforeSerialize = (doc: SVGSVGElement, paper: dia.Paper) => void | SVGElement;

The same behaviour as beforeSerialize in paper.prototype.toSVG().

fillFormControls​

The same behaviour as fillFormControls in paper.prototype.toSVG().

grid​

When set to true, the grid is rendered in the export. It defaults to false.

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

Types​

RasterExportOptions​

interface RasterExportOptions extends CanvasExportOptions {
type?: 'image/png' | 'image/jpeg' | string;
quality?: number;
}

CanvasExportOptions​

interface CanvasExportOptions extends SVGExportOptions {
height?: number;
width?: number;
size?: string;
backgroundColor?: string;
padding?: dia.Padding;
canvg?: any;
}
info

CanvasExportOptions extends SVGExportOptions. Only the configuration options listed above are available when working with Raster methods.

interface SVGExportOptions {
preserveDimensions?: boolean;
area?: dia.BBox;
convertImagesToDataUris?: boolean;
useComputedStyles?: boolean;
stylesheet?: string;
grid?: boolean;
beforeSerialize?: BeforeSerialize;
fillFormControls?: boolean;
}