Image Class

Implements the base functionality of an image object.

Declaration

export abstract class Image

Inheritance

Image

FloatingImage

InlineImage

Properties

actualSize Property

Specifies the actual image size.

Declaration

actualSize: Size

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.

JS

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

readonly base64: string

Property Value

Type	Description
string	The image content.

description Property

Specifies the image description.

Declaration

description: string

Property Value

Type	Description
string	The description.

extension Property

Returns the image extension.

Declaration

readonly extension: string

Property Value

Type	Description
string	The image extension, for instance '.jpeg'.

interval Property

Returns the text buffer interval that contains the image.

Declaration

readonly interval: Interval

Property Value

Type	Description
Interval	An object that contains the interval settings.

Remarks

JS

// 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

readonly isLoaded: boolean

Property Value

Type	Description
boolean	true if the image is loaded; otherwise, false.

originalSize Property

Returns the original size of the image.

Declaration

readonly originalSize: Size

Property Value

Type	Description
Size	The image size.

Remarks

The example below demonstrates how to resize the inserted image keeping aspect ratio.

JS

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

readonly url: string | undefined

Property Value

Type	Description
string	The image URL. undefined if the image has no URL.

Methods

changeWrapType(wrapType) Method

Applies a wrap type to the image.

Declaration

changeWrapType(
    wrapType: WrapType
): InlineImage | FloatingImage

Parameters

Name	Type	Description
wrapType	WrapType	The new wrap type.

Returns

Type	Description
InlineImage	An object that contains settings of the current image (if the wrapType parameter value is Inline).
FloatingImage	An object that contains settings of the current image (if the wrapType parameter value is not Inline).

Remarks

The example below demonstrates how to change the wrapping type of every document image to Inline.

JS

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

JS

// 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
WrapType	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.

JS

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).

JS

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;
  }
}

Razor C#

    @(Html.DevExpress().RichEdit("rich")
      .OnContextMenuShowing("onContextMenuShowing")
      .OnCustomCommandExecuted("onCustomCommandExecuted")
    )    

C#

[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 } });
    }
}