makeImageData method

dynamic makeImageData([
  1. ImageRendererOptions? options
])

Create a bitmap of the current Diagram encoded as a base64 string, or returned as an ImageData object. This method uses the toDataURL method of the HTMLCanvasElement to create the data URL, or the getImageData method of the Canvas Context. Unlike toDataURL, this method will not throw an error if cross-domain images were drawn on the canvas, instead it will return a data URL of a bitmap with those images omitted.

A simple example:

myDiagram.makeImageData({
  scale: 1.5,
  size: new go.Size(100,100)
});

See the page on Making Images for more usage examples.

Note that a returned HTMLImageElement, either returned directly or passed to the callback function, might not yet have the complete property set to true. So if you need to draw the image immediately, you should check that property first. If it is false, add a "load" listener to the HTMLImageElement that does the drawing you want.

At the current time methods such as Diagram#makeImage, Diagram#makeImageData and Diagram#makeSvg do not work on Overviews.

For the rendering to work, the diagram must have an HTML Div element as the #div. @param {any=} options a JavaScript object detailing optional arguments for image creation. Rendering options for both images and SVG:

  • size: The size of the created image, as a Size, limited by the maxSize property. If no scale or position is specified then the diagram will be scaled to fit the given size. If you set a size, you should also set a position. If you are scaling the diagram, you may also want to scale the size.
  • scale: The scale of the diagram. If scale is specified and size is not, the resulting image will be sized to uniformly fit the space needed for the given scale. Can be constrained by the maxSize property. A scale value of NaN will automatically scale to fit within the maxSize, but may be smaller, with a maximum computed scale of 1.
  • maxSize: The maximum size of the created image, as a Size. The default value is (Infinity, Infinity) for SVG and (2000, 2000) for images. This is typically used when scale is specified and helps prevent accidental excessive memory usage, which is especially needed in limited-memory environments. You cannot use Infinity when providing a maximum size for an image -- consider calling #makeSvg instead.
  • position: The position of the diagram, as a Point. By default this is the position of Diagram#documentBounds with the Diagram#padding removed. If a specific parts collection is used, by default this is the top-left diagram position of their collective bounds. If you set a position, you should also set a size.
  • parts: An iterator of GraphObjects, typically Parts, such as one from Diagram#selection or Layer#parts. If GraphObjects are specified their containing Part will be drawn. By default all Parts are drawn except temporary parts (see showTemporary).
  • padding: A Margin (or number) to pad the image with. If a size is specified, the padding will not increase the image size, it will only offset the Diagram contents within the image. The default value is a padding of 1.
  • background: A valid CSS color to replace the default (transparent) canvas background. Any padding area is also colored.
  • showTemporary: A boolean value, defaulting to false, that determines whether or not temporary objects such as adornments are included in the image.
  • showGrid: A boolean value, defaulting to the value of showTemporary, that determines whether or not the Grid Layer (containing Diagram#grid) is included in the image regardless of the value of showTemporary. This is useful if you want to include the grid but not adornments, or vice versa.
  • document: An HTML Document, defaulting to window.document (or the root object in other contexts) This may be useful to set if you intend your Image or SVG to be opened in a new window.
  • callback: The function to call when an image is finished creation. It has one argument, which is of the type specified by the value of the returnType or SVG DOM. If provided, call the callback when finished instead of returning immediately. This can be useful if you need to wait for image assets to load. This also respects the callbackTimeout. This argument is necessary if the returnType is "blob", however a callback can be used with any returnType. See the Minimal Image Blob Download sample for an example usage, which also demonstrates downloading an image file without involving a web server.
  • callbackTimeout: If a callback is specified, the additional amount of time in milliseconds a call will wait before completeing. Right now, it will only wait if image assets in the Diagram are not yet loaded. Default is 300 (milliseconds).

Additional image-specific arguments (not for SVG):

  • type: The optional MIME type of the image. Valid values are typically "image/png" and "image/jpeg". Some browsers allow "image/webp". The default value is "image/png", and unrecognized values will defer to the default.
  • returnType: The optional return type of the image data. Valid values are "ImageData", "Image", "string", and "blob". The "string" option returns a base64 string representation of the image. The "ImageData" option returns an ImageData object representation of the image. The "Image" option returns an HTMLImageElement using ImageData as the HTMLImageElement.src. The "blob" option requires that the callback property is also defined. The default value is "string", and unrecognized values will return a string.
  • details: The optional details to pass to the HTMLCanvasElement's toDataURL function. If the type is "image/jpeg" then this can be a number from 0 to 1, inclusive, describing the desired jpeg quality.

@return {ImageData|string|null} An ImageData, or a base64-encoded string describing an image, or an HTMLImageElement, or null if a callback is specified. @see #makeImage

Implementation

_i2.dynamic makeImageData([_i3.ImageRendererOptions? options]) =>
    _i4.callMethod(
      this,
      'makeImageData',
      [options ?? _i5.undefined],
    );