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

Implementing Eyedropper Functionality for the ImageEditor


Product Version
Product ImageEditor for ASP.NET Core


How can I create a custom tool to pick a color from an image in the ImageEditor?


The MDN tutorial for extracting data from a canvas element demonstrates how to extract the color for a specific pixel. Add a custom command to the ImageEditor Toolbar implementing the logic demonstrated in the MDN tutorial linked above.

In the example below, clicking on the image retrieves the color of the pixel clicked and sets it as the value of the ColorPicker component. Inspect this runnable example of the code snippet below:


     function pick(event, canvas, ctx) {
        const bounding = canvas.getBoundingClientRect();
        const x = event.clientX - bounding.left;
        const y = event.clientY -;
        const pixel = ctx.getImageData(x, y, 1, 1);
        const data =;

        const rgba = `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${data[3] / 255})`;

        return data
        var imageEditorNS = kendo.ui.imageeditor;

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

            canvas.addEventListener("click", function(event){
                var data = pick(event, canvas, ctx);
                var picker = $("#colorpicker").getKendoColorPicker();
                picker.value(`rgba(${data[0]},${data[1]},${data[2]},${data[3] / 255})`);
            },{once : true});
<div class="demo-section wide">
    <label>Selected Color:</label>
    <h3>Upload image and select color:</h3>
        .Toolbar(toolbar=>toolbar.Items(i=> {
            i.Add().Command("GetColorImageEditorCommand").Type("button").Text("Get Color").Icon("eyedropper");

See Also

More ASP.NET Core ImageEditor Resources

In this article