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 TXText
╰ TXTextControl Namespace
╰ ImageCollection Class
An instance of the ImageCollection class contains all images in a Text Control document or part of the document represented through objects of the type Image. 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:
@using TXTextControl.Web.MVC | |
@using TXTextControl.Web | |
<input type="file" id="file" name="file" enctype="multipart/form-data" /> | |
@Html.TXTextControl().TextControl(settings => | |
{ | |
}).Render() |
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:
document.getElementById('file').addEventListener('change', readFile, false); | |
function readFile(evt) { | |
var files = evt.target.files; | |
var file = files[0]; | |
var reader = new FileReader(); | |
reader.onload = function (event) { | |
var binaryString = btoa(event.target.result); | |
TXTextControl.images.addInline(binaryString, -1); | |
} | |
reader.readAsBinaryString(file); | |
} |
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.