Using JavaScript API enhancements, client-side images can be added to documents. All supported image types can be added as Base64 encoded strings and inserted at character position, anchored to paragraphs or fixed on pages.

The TXTextControl.ImageCollection object provides methods to add images from Base64 data into the document. The following methods can be used to add images:

Method Description
addAnchored Inserts a new image which is anchored to the specified text position.
addAnchoredAtLocation Inserts a new image which is anchored to the specified text position.
addAtFixedPosition Inserts a new image which has a fixed geometrical position in the document.
addInline Inserts an image inline, which means that it is treated in the text like a single character.

Consider the following ASP.NET MVC view that consists of a simple HTML file input element and a TextControl:

Loading...

The following JavaScript code reads the content of an opened local image, converts it to a Base64 encoded string and finally adds the image to the document:

Loading...

In the following sample, that can be downloaded directly from our GitHub account, an additional ribbon menu item is added that opens a dialog box to add local images.

Adding local images

GitHub

Download and Fork This Sample on GitHub

We proudly host our sample code on github.com/TextControl.

Please fork and contribute.

Requirements for This Sample

  • Visual Studio 2015 or better
  • TX Text Control .NET Server for ASP.NET X15 (trial sufficient)