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