Tuesday, August 29, 2017

office/How to add a picture


How to add a picture watermark with online image in Word 2016 using JavaScript


This sample demonstrates how to add or remove the picture watermark in Word 2016. In this sample we convert online images to base64 string in JavaScript. And use the string to add a picture watermark to the word document.

Sample prerequisites

• Visual Studio 2015 or Visual Studio 2013 with Update 5

• Word 2016, or any client that supports the Word JavaScript API.

Running the sample

Do one of the following to start debugging:

• Click the Start Debugging button in the toolbar.

• Click Start Debugging in the Debug menu.

• Press F5.


You will see the add-in loaded into the new instance of Word:


Input the test url https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Bing_logo.svg/220px-Bing_logo.svg.png to the input box, then press “Enter” to load image.



Click button “Add watermark”:



You can remove the watermark you just added by clicking the button “Remove watermark”.


Using the code



function removeWatermark() {       Word.run(function (context) {           var sections = context.document.sections;           context.document.save();           context.load(sections);           return context.sync().then(function () {               var header = sections.items[0].getHeader("primary");               var myCCs = header.contentControls.getByTitle("myWatermarkControl");               context.load(myCCs);               context.sync().then(function () {                   if (myCCs.items.length > 0{                       myCCs.items[0].delete();                       context.sync();                       showNotification("Success""Picture watermark has been removed!");                   }               }).catch(function (e) {                   showNotification(e.message);               });           });       }).catch(function (e) {           showNotification(e.message, e.description);       });   }      function addWatermark() {       if ($("#imgOnline").attr("src").trim() == "" || !document.getElementById("imgOnline").complete) {           return;       }          Word.run(function (context) {           var sections = context.document.sections;           context.load(sections);           return context.sync().then(function () {               var watermark = getWatermark();               var header = sections.items[0].getHeader("primary");               var range = header.insertOoxml(watermark, "replace");               var contentControl = range.insertContentControl();               contentControl.title = "myWatermarkControl";               contentControl.appearance = "hidden";               context.sync();               showNotification("Success""Picture watermark has been added!");           });       }).catch(function (e) {           showNotification(e.message, e.description);       });   }      function getWatermark() {       var img = document.getElementById("imgOnline");       var canvas = document.createElement('canvas');       canvas.width = img.naturalWidth;       canvas.height = img.naturalHeight;       canvas.getContext('2d').drawImage(img, 00);       var base64 = canvas.toDataURL('image/png').replace(/^data:image\/(png|jpeg);base64,/'');       var mywatermark = "";       return mywatermark.replace("binaryDataToReplace", base64);   }


More information

See more samples about Word Add-ins.

Get Text watermark sample here.

Microsoft All-In-One Code Framework is a free, centralized code sample library driven by developers' real-world pains and needs. The goal is to provide customer-driven code samples for all Microsoft development technologies, and reduce developers' efforts in solving typical programming tasks. Our team listens to developers’ pains in the MSDN forums, social media and various DEV communities. We write code samples based on developers’ frequently asked programming tasks, and allow developers to download them with a short sample publishing cycle. Additionally, we offer a free code sample request service. It is a proactive way for our developer community to obtain code samples directly from Microsoft.

No comments:

Post a Comment