Programmatically Inserting an image from an O365 Add-In into your Word 2016 document

In this article I will demonstrate how to convert a web based image, displayed in an Add-In, into a base64 encoded string. With that I will then insert it into a Word document, directly from the Add-In.

Introduction

In the previous article I showed how to manually insertInlinePictureFromBase64 an image into a Word 2016 document. In this article I will demonstrate how to convert and existing web based image into base64 encoded string and then insert it.

HTML5 canvas element

Using the HTML5 canvas element we can easily convert an image to base64 using the canvas.toDataURL() method. The following code is a simple example of how to get an image from within the Add-In, convert it and insert it.

NOTE

The canvas.toDataURL() method will trigger a Security Alert if the image is not hosted in the same domain as the Add-In.

//create a canvas element 
var c = document.createElement("canvas"); 
var ctx = c.getContext("2d"); 
var img = document.getElementById("preview"); 
ctx.drawImage(img, 10, 10); 
//create the base64 encoded string and take everything after the comma
//format is normally data:Content-Type;base64,TheStringWeActuallyNeed
var base64 = c.toDataURL().split(",")[1];

//insert the TEXT o fthe base64 string into the word document as text
// Run a batch operation against the Word object model.
Word.run(function (context) {

    // Create a proxy object for the document body.
    var body = context.document.body;

    // Queue a commmand to insert HTML in to the beginning of the body.
    body.insertHtml(base64, Word.InsertLocation.start);

    // Synchronize the document state by executing the queued commands,
    // and return a promise to indicate task completion.
    return context.sync().then(function () {
        console.log('HTML added to the beginning of the document body.');
    });
})
.catch(function (error) {
    console.log('Error: ' + JSON.stringify(error));
    if (error instanceof OfficeExtension.Error) {
        console.log('Debug info: ' + JSON.stringify(error.debugInfo));
    }
});

//Insert the image into the word document as an image created from base64 encoded string
Word.run(function (context) {

    // Create a proxy object for the document body.
    var body = context.document.body;

    // Queue a command to insert the image.
    body.insertInlinePictureFromBase64(base64, 'Start');

    // Synchronize the document state by executing the queued commands,
    // and return a promise to indicate task completion.
    return context.sync().then(function () {
        app.showNotification('Image inserted successfully.');
    });
})
.catch(function (error) {
    app.showNotification("Error: " + JSON.stringify(error));
    if (error instanceof OfficeExtension.Error) {
        app.showNotification("Debug info: " + JSON.stringify(error.debugInfo));
    }
});

As we can see from the image below – the image and text are inserted. There is 4 pages of text for what was originally a 6KB (SIX) image.
This is not a very quick process.

im1

im2

Conclusion

This is pretty slow programmatically and a copy and paste is just as effective. But, it can be done so you never know someone might find use for it in the future 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s