Image Class
Implements the base functionality of an image object.
#Declaration
export abstract class Image
#Inheritance
#Properties
#actualSize Property
Specifies the actual image size.
#Declaration
#Property Value
Type | Description |
---|---|
Size | The image size. |
#Remarks
The example below demonstrates how to maintain the aspect ratio when you resize an inserted image.
function resizeImage(img){
var newWidth = richEdit.unitConverter.centimetersToTwips(10);
var newHeight = newWidth / img.originalSize.width * img.originalSize.height;
img.actualSize = new DevExpress.RichEdit.Size(newWidth, newHeight);
};
richEdit.document.images.createInline(richEdit.selection.active, {
url: 'your-image-URL', callback: resizeImage});
#base64 Property
Returns the image content that is encoded with base64 digits.
#Declaration
get base64(): string
#Property Value
Type | Description |
---|---|
string | The image content. |
#description Property
Specifies the image description.
#Declaration
get description(): string
set description(value: string)
#Property Value
Type | Description |
---|---|
string | The description. |
#extension Property
Returns the image extension.
#Declaration
get extension(): string
#Property Value
Type | Description |
---|---|
string | The image extension, for instance |
#interval Property
Returns the text buffer interval that contains the image.
#Declaration
get interval(): Interval
#Property Value
Type | Description |
---|---|
Interval | An object that contains the interval settings. |
#Remarks
// remove all images from the second document section
var sectionInterval = richEdit.document.sections.getByIndex(1).interval;
var imgIterator = richEdit.document.images.getIterator(sectionInterval.start);
while(imgIterator.next() && (imgIterator.image.interval.end < sectionInterval.end))
imgIterator.image.delete();
#isLoaded Property
Returns whether the image is loaded.
#Declaration
get isLoaded(): boolean
#Property Value
Type | Description |
---|---|
boolean |
|
#originalSize Property
Returns the original size of the image.
#Declaration
get originalSize(): Size
#Property Value
Type | Description |
---|---|
Size | The image size. |
#Remarks
The example below demonstrates how to resize the inserted image keeping aspect ratio.
function resizeImage(img){
var newWidth = richEdit.unitConverter.centimetersToTwips(10);
var newHeight = newWidth/img.originalSize.width*img.originalSize.height;
img.actualSize = new DevExpress.RichEdit.Size(newWidth, newHeight);
};
richEdit.document.images.createInline(richEdit.selection.active, {
url: 'your-image-URL', callback: resizeImage});
#url Property
Returns the image URL.
#Declaration
get url(): string | undefined
#Property Value
Type | Description |
---|---|
string | The image URL. |
#Methods
#changeWrapType(wrapType) Method
Applies a wrap type to the image.
#Declaration
changeWrapType(
wrapType: WrapType
): InlineImage | FloatingImage
#Parameters
Name | Type | Description |
---|---|---|
wrap |
Wrap |
The new wrap type. |
#Returns
Type | Description |
---|---|
Floating |
An object that contains settings of the current image (if the |
Inline |
An object that contains settings of the current image (if the |
#Remarks
The example below demonstrates how to change the wrapping type of every document image to Inline.
var imgIterator = richEdit.document.images.getIterator();
while(imgIterator.next())
imgIterator.image.changeWrapType(DevExpress.RichEdit.WrapType.Inline);
#delete Method
Deletes the image from the document.
#Declaration
delete(): void
#Remarks
// remove all images from the second document section
var sectionInterval = richEdit.document.sections.getByIndex(1).interval;
var imgIterator = richEdit.document.images.getIterator(sectionInterval.start);
while(imgIterator.next() && (imgIterator.image.interval.end < sectionInterval.end))
imgIterator.image.delete();
#getWrapType Method
Returns the image’s wrap type.
#Declaration
abstract getWrapType(): WrapType
#Returns
Type | Description |
---|---|
Wrap |
A wrap type value. |
#onLoaded(callback) Method
A function that is called after the image is loaded in the document.
#Declaration
onLoaded(
callback: (image: Image) => void
): void
#Parameters
Name | Type | Description |
---|---|---|
callback | (image: Image) => void | The function. The image parameter returns the processed image. |
#Remarks
The onLoaded function allows you to perform actions after an image is loaded in the document. Use the image parameter to get information about the loaded image, for instance, original image size.
richEdit.events.contentInserted.addHandler(function(s, e){
var subDocument = s.document.subDocuments.getById(s.subDocumentId);
var images = richEdit.document.images.find(e.interval);
images.forEach(function(image) {
image.onLoaded(function(image){
console.log(image.isLoaded); // true
console.log(image.actualSize);
console.log(image.originalSize);
console.log(image.base64);
});
});
});
#reload(base64) Method
Reloads the image with new content.
#Declaration
reload(
base64: string,
size?: Size
): void
#Parameters
Name | Type | Description |
---|---|---|
base64 | string | The new image content in string representation that is encoded with base-64 digits. |
size | Size | Image size. |
#Remarks
The reload method allows you to replace an image with new content specified by the base64 parameter. This API can be useful if a document contains an image in an unsupported format. In this case, you can convert the image on the server and reload it with new content (see the example below).
function getCurrentImage(s) {
const intervals = s.selection.intervals;
if (intervals.length == 1 && intervals[0].length == 1) {
const selectedImages = s.selection.activeSubDocument.images.find(intervals[0].start);
if (selectedImages.length == 1)
return selectedImages[0];
}
return null;
}
function onContextMenuShowing(s, e) {
var image = getCurrentImage(s);
if (image && !image.isLoaded) {
e.contextMenu.insertItem(new DevExpress.RichEdit.ContextMenuItem('ReloadImage', {text: 'Reload image'}), 1);
}
};
var requestId = 0;
var loadingLabel = "__loading__";
function onCustomCommandExecuted(s, e) {
switch (e.commandName) {
case 'ReloadImage':
var image = getCurrentImage(s);
if (!image.description || image.description.substring(0, loadingLabel.length) !== loadingLabel) {
var subDocument = s.selection.activeSubDocument;
var imageRequestId = String(requestId++);
image.description = loadingLabel + imageRequestId + loadingLabel + image.description;
var successHandler = function (serverResponce) {
var imgIterator = subDocument.images.getIterator();
const regexp = new RegExp(loadingLabel + "(\\d+)" + loadingLabel);
while (imgIterator.next()) {
var image = imgIterator.image;
if (image.description) {
var matchResult = image.description.match(regexp);
if (matchResult && matchResult[1] === imageRequestId) {
image.description = image.description.substring(matchResult[0].length);
if (serverResponce.success) {
image.reload(serverResponce.base64);
//image.reload(serverResponce.base64, { "width": serverResponce.width, "height": serverResponce.height });
}
break;
}
}
}
};
$.ajax({
url: "@(Url.Action("ReloadImage", "Home"))",
type: 'POST',
data: { base64: image.base64 },
dataType: 'json',
success: successHandler,
error: function (err) {
console.log(err);
}
});
}
break;
}
}
@(Html.DevExpress().RichEdit("rich")
.OnContextMenuShowing("onContextMenuShowing")
.OnCustomCommandExecuted("onCustomCommandExecuted")
)
[HttpPost]
public JsonResult ReloadImage(string base64) {
Image image = Image.FromStream(new MemoryStream(Convert.FromBase64String(base64)));
using (MemoryStream ms = new MemoryStream()) {
image.Save(ms, ImageFormat.Jpeg);
string resultBase64 = Convert.ToBase64String(ms.ToArray());
return Json(new Hashtable() { { "base64", resultBase64 }, { "width", 2000 }, { "height", 1500 }, { "success", true } });
}
}