2 Answers, 1 is accepted
Hi Joel,
Telerik UI for ASP.NET Core comes with a set of predefined methods and components that can be used to export content to an image, PDF, or SVG. More information on how to prepare the HTML and export it to PDF, take a look at the following example:
https://demos.telerik.com/aspnet-core/pdf-export
It works with any HTML elements, therefore, you could pass the correct selector for the image editor and the saveAs method should download a PDF with the respective image.
Kind regards,
Tsvetomir
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 2
Iron
Iron
Iron
Hi Joel,
You can create a custom command for the ImageEditor to print images. There are numerous solutions on how to print an image, for example this SO thread discusses available options.
That said, you can define a Print command and print an image the following way:
<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>Regards,
Aleksandar
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.