Rasterization

The ESD/SPD Web editor uses the Scalable Vector Graphics (SVG) format as its underlying document format. SVG diagrams created in the ESD/SPD Web editor can be displayed in any modern browser as well as other SVG-capable applications. If your application requires diagram storage or rendering using raster images, you can use one of the diagram rasterization technologies provided by the Web SDK. Two methods are supported:

• The diagram editor's exportImage method converts the diagram currently loaded into the editor to an image.
• The rasterize REST service. This service accepts an SVG diagram and returns the diagram as an image.

Rasterize REST Service:

As described here the ESD/SPD Web Editor relies on a web service provided by ESD/SPD Web Editor Server. This service exposes a rasterize endpoint that your application can call 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 sre:

• '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 ESD/SPD Web editor.

var xhr = new XMLHttpRequest(),
    rqst = {
        image: true,
        encoding: 'base64',
        format: 'image/png',
        width: 600,
        height: 600,
        margin: 12,
        data: svgDiagram
    },

    // assuming the ESD/SPD 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));