The following tutorial shows how to export the HTML canvas of an Annotated Widget to an image using a Cross Plot as an example Widget. For more information on exporting please visit the Export to PDF .
Any node geotoolkit/scene/Node can also be exported to an image using the geotoolkit/scene/exports/NodeExport class. The following example utilizes the function geotoolkit/scene/exports/NodeExport.exportToImageUrl() to generate a Base64 image string. Clicking the "EXPORT TO IMAGE" button in the toolbar will export the printed image below by creating the Base64 string and assigning the result to the src attribute of an img tag.
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { getPixelScale } from "@int/geotoolkit/base.js";
import { NodeExport } from "@int/geotoolkit/scene/exports/NodeExport.ts";
import { Text } from "@int/geotoolkit/scene/shapes/Text.ts";
import { loadFont } from "@int/geotoolkit/util/fontloader.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { createWidget } from "/src/code/Carnac/Export/common.ts";
function exportToImage(plot, image) {
const widget = plot.getRoot();
image.src = NodeExport.exportToImageUrl(
widget,
image.width * getPixelScale(),
image.height * getPixelScale(),
false,
false,
widget.getModelLimits()
);
}
function createScene(canvas, image) {
const widget = createWidget(true);
const plot = new Plot({
"canvaselement": canvas,
"root": widget
});
const message = new Text({
"text": 'Click "EXPORT TO IMAGE" button to export image here.',
"ax": image.width / 2,
"ay": image.height / 2
});
image.src = NodeExport.exportToImageUrl(
message,
image.width,
image.height,
false,
false,
new Rect(0, 0, image.width, image.height)
);
loadFont("src/assets/fonts", "roboto").then(() => {
plot.update();
});
return plot;
}
export { createScene, exportToImage };
createScene(document.querySelector('[ref="plot"]'), document.querySelector('[ref="img"]'));