Add Overlay Text in ImageEditor On Top of an Image

Environment

Product

Progress® Kendo UI® ImageEditor for jQuery

 

Description

How can I add overlay text over an image in ImageEditor?

Solution

Adding an overlay text over image could be achieved by utilizing CanvasRenderingContext2D through the ImageEditor's methods. By getting the Image's canvas element and context object, the developer can customize the content placed on the image.

DatePicker

The following example demonstrates how a custom command can be created in the ImageEditor toolbar for adding a custom text over a loaded image.

    <div id="imageEditor"></div>

    <script>
      $("#imageEditor").kendoImageEditor({
        toolbar: {
          items: [
            "open",            
            {
              type: "button",
              text: "Add Overlay Text",
              icon: "launch",
              enable: true,
              command:"AddOverlayTextImageEditorCommand"
            }
          ]
        }
      });

      $(document).ready(function () {

        var imageEditorNS = kendo.ui.imageeditor;

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

            //If there's an image
            if (image){

                //clear the contents
                ctx.clearRect(0, 0, canvas.width, canvas.height);

                //Draws the image to te canvas
                ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

                //Custom text is configured
                ctx.fillStyle = "#ffffff";
                ctx.font = "100pt Calibri";
                ctx.fillText('My Custom Text', canvas.width/2, canvas.height/2);

                //Draws the image instance
                imageeditor.drawImage(canvas.toDataURL()).done(function(image){

                //draw the canvas element with an image
                imageeditor.drawCanvas(image);

              }).fail(function (ev) {

                //trigger error
                imageeditor.trigger("error", ev);
              });
            } else {
              kendo.alert("No Image Present");
            }
          }
        });
      })
    </script>

See Also

• [ImageEditor] API Reference](https://docs.telerik.com/kendo-ui/api/javascript/ui/imageeditor)