Can you clear/remove an image from the client-side for the Image Editor?

[Patrick]

Hi, I would like to have a button that clear/remove the selected image on the image editor. I've looked through your client API and I couldn't find how to do that?

Thank you for your help!

Patrick

[Aleksandar]

Hello Patrick,

To clear the image you can clear the canvas element, for example. To achieve this add a custom command to the ImageEditor's Toolbar, for example:

i.Add().Command("ClearEditorCommand").Type("button").Text("Clear");

<script>
        var imageEditorNS = kendo.ui.imageeditor;

        imageEditorNS.commands.ClearEditorCommand = imageEditorNS.ImageEditorCommand.extend({
        exec: function () {
            var that = this,
                options = that.options,
                imageeditor = that.imageeditor,
                canvas = imageeditor.getCanvasElement(),
                ctx = imageeditor.getCurrent2dContext(),
                image = imageeditor.getCurrentImage();

            var croppedImage = ctx.getImageData(0,0,1,1);
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                canvas.width = 0;
                canvas.height = 0;
                ctx.putImageData(croppedImage, 0, 0);

                imageeditor.drawImage(canvas.toDataURL()).done(function(image) {
                    imageeditor.drawCanvas(image);
                }).fail(function(ev) {
                    imageeditor.trigger("error", ev);
                });
        }
        });
    </script>

This sample REPL demonstrates the above. If that is not what you are looking for, feel free to customize the example further to meet your needs.

Regards,
Aleksandar
Progress Telerik