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)