Creating an ImageEditor Print Command
Environment
| Product | Progress Telerik UI for ASP.NET Core |
Description
How can I print the edited image from the Telerik UI for ASP.NET Core ImageEditor?
Solution
Create a custom command and use it to print the image.
The below example demonstrates how you can create a Print command:
<script>
var imageEditorNS = kendo.ui.imageeditor;
imageEditorNS.commands.PrintImageEditorCommand = imageEditorNS.ImageEditorCommand.extend({
exec: function () {
var that = this,
options = that.options,
imageeditor = that.imageeditor,
canvas = imageeditor.getCanvasElement(),
ctx = imageeditor.getCurrent2dContext(),
image = imageeditor.getCurrentImage();
var win = window.open('about:blank', "_new");
win.document.open();
win.document.write([
'<html>',
' <head>',
' </head>',
' <body onload="window.print()" onafterprint="window.close()">',
' <img src="' + image.src + '"/>',
' </body>',
'</html>'
].join(''));
win.document.close();
}
});
</script>
<div class="demo-section wide">
@(Html.Kendo().ImageEditor()
.Name("imageEditor")
.Height(900)
.SaveAs(s => s.FileName("image_edited.png"))
.Toolbar(toolbar=>toolbar.Items(i=> {
i.Add().Name("open");
i.Add().Name("save");
i.Add().Name("resize");
i.Add().Name("crop");
i.Add().Name("undo");
i.Add().Name("redo");
i.Add().Name("zoomIn");
i.Add().Name("zoomOut");
i.Add().Name("zoomDropdown");
i.Add().Command("PrintImageEditorCommand").Type("button").Text("Print").Icon("print");
}))
)
</div>
Refer to this REPL for a runnable example.