New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Create ImageEditor Print Command

Environment

Product Progress Telerik UI for ASP.NET MVC

Description

How can I print the edited image from the 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.

In this article