Rasterization

Rasterization

The Web SDK uses the Scalable Vector Graphics (SVG) format as its underlying document format. SVG diagrams created in the editor can be displayed in any modern browser as well as other SVG-capable applications. If your application requires storing or rendering diagrams as raster (PNG or JPEG) images, you can use one of the diagram rasterization facilities provided by the Web SDK.

Three rasterization methods are provided:

• The diagram editor’s exportImage method converts the diagram currently loaded into the editor to a raster image.
• The diagram editor’s store method can optionally generate a raster image when storing a diagram.
• The rasterizer REST service provided by the Web SDK accepts an SVG diagram and returns a raster image of the diagram. Note that this service can be enabled or disabled via the rasterizerService option in the server configuration file. More information is available in the section on server configuration in the Server topic.

Rasterize REST Service:

As described here, the Web SDK server can provide a rasterize endpoint that your application can invoke to generate an image from an SVG diagram.

The rasterize service accepts a stringified Javascript object containing rasterization options. This object has the same format as exportImage method’s options parameter. In addition, the object must include a data property, containing the SVG diagram to be rasterized. The object may also include a uom property, containing the unit-of-measure to be used when generating the image. The valid values for the uom property are:

• ‘feetAndInches’ - Traditional US feet and inches; e.g. 23’ 7"
• ‘feetAndTenths’ - Decimal feet; e.g. 23.5’
• ‘meters’ - Decimal meters; e.g. 7.19m

If the uom property is not included, the image will be generated using US feet and inches.

Sample Javascript code to rasterize a diagram:

// sample assumes the svgDiagram variable contains an SVG diagram authored
// in the editor.
 
var xhr = new XMLHttpRequest(),
    rqst = {
        image: true,
        encoding: 'base64',
        format: 'image/png',
        width: 600,
        height: 600,
        margin: 12,
        uom: 'meters',
        data: svgDiagram
    },
    // assuming the editor web service is located at http://localhost:3000
    path = "http://localhost:3000/REST/rasterize";
 
xhr.open('POST', path, true);
xhr.responseType = 'text';
xhr.onload = function() {
    var rasterImage;
    if (this.status == 200) {
        rasterImage = this.response;
        // rasterImage is a string containing the rasterized diagram, base64 encoded
    }
};
 
xhr.send(JSON.stringify(rqst));