none
Office Word Javascript API Getting inlinePicture height and width RRS feed

  • Question

  • I am using the Word API to insert and refresh some images of different sizes - worth mentioning is that those images are wrapped in a content control which has a unique ID corresponding to the image.

    After inserting the image at a certain size and inspecting the image using Word's Picture format tool I can see that it is inserted correctly with the width and height I want.

    The problem comes when later on I try to get the image using code similar to the following:

    return Word.run((context: Word.RequestContext): Promise<void> => {
    
                var contentControls = context.document.contentControls;
                context.load(contentControls, 'tag');
    
                return context.sync().then(() => {
    
                    let contentControlToRefresh: Word.ContentControl;
    
                    // Find the content control containing imageId
                    for (var contentControl of contentControls.items) {
                        if (Utils.contains(contentControl.tag, imageId)) {
    
                            // Add control to tracked objects
                            context.trackedObjects.add(contentControl);
                            contentControlToRefresh = contentControl;
                        }
                    } 
    				
                    // Get the image from the content control -- need to get the size
                    var pics = contentControlToRefresh.inlinePictures;
                    context.load(pics);
    				
    		return context.sync().then(()=>{
    			let pic: Word.InlinePicture = pics.items[0];
    			context.trackedObjects.add(pics.items[0]);
    					
    			// Set size 					
    			let size: Dimensions = {height: pic.height, width: pic.width}; // These two values pic.height and pic.width are slightly smaller than original image
    					
    		})
    }});

    The Height and Width of the InlinePicture are always slightly smaller than the actual image causing it to shrink - is this by design and I'm missing something quite important or an actual bug ?

    Thursday, September 1, 2016 2:31 PM

Answers

  • Hi Todor Dimitrov Todorov,

    According to your description, I have retested this project and reproduced this issue.

    Get original size:

    Office Word Javascript API getting inlinePicture height and width:

    So I suggest that you could submit any feedback to OfficeDev UserVoice:

    https://officespdev.uservoice.com/

    Thanks for your understanding.

    Monday, September 12, 2016 7:40 AM

All replies

  • >>>The Height and Width of the InlinePicture are always slightly smaller than the actual image causing it to shrink - is this by design and I'm missing something quite important or an actual bug ?

    According to your description, I have made a sample to try to reproduce this issue,  I get below this result:

    Sub Demo()
    
    'height:1.37
    'width:5.33
    
    Debug.Print InchesToPoints(1.37)
    Debug.Print InchesToPoints(5.33)
    
    End Sub

    Get original size:

    Office Word Javascript API getting inlinePicture height and width:

    There are difference between original size and Office Word Javascript API getting inlinePicture height and width.

    Friday, September 2, 2016 8:08 AM
  • Many thanks for the reply 

    Yes you seem to be getting the same difference as me but I get a much larger difference 

    Orignal Layout values:

    height - 3.39 inches

    width - 6.13 inches

    Leaving us with:

    height of 325.44

    width of 588.48

    Word.InlinePicture result:

    pic.height  - 244.05

    pic.width = 441.35

    (Unfortunately can't post any images to my forum post as my account is still not verified)

    As you can see the difference in my case is quite large - starting to think maybe its related to screen resolution/size? - using a 1920x1080 res screen

    Friday, September 2, 2016 9:00 AM
  • >>>As you can see the difference in my case is quite large - starting to think maybe its related to screen resolution/size? - using a 1920x1080 res screen

    According to your description, as far as I know that One point equals 1/72 of an inch, but this is the desktop publishing definition of point. Historically, the exact measure of a point has varied. I suggest that you could change screen resolution/size to check whether this result will be different.

    Thanks for your understanding.
    Monday, September 5, 2016 6:00 AM
  • Tested it a bit with various screen sizes over the weekend still getting the same large difference - 

    800x600 screen:

    • Original height 325.44 => Word.InlinePicture 244.05
    • Original width 588.48 =>  Word.InlinePicture 441.34

    1360x768 screen:

    • Original height 325.44 => Word.InlinePicture height 244.05
    • Original width 588.48 => Word.InlinePicture width 441.35

    1366x768 screen

    • Original height 325.44 => Word.InlinePicture height 244.05
    • Original width 588.48 => Word.InlinePicture width 441.34

    1400x900 screen:

    • Original height 325.44 => Word.InlinePicture height 244.05
    • Original width 588.48 => Word.InlinePicture width 441.35

    1920x1080 screen:

    • Original height 325.44 => Word.InlinePicture height 244.05
    • Original width 588.48 => Word.InlinePicture width 441.35

    Got pretty consistent results across varying screen sizes which leads me to the conclusion that its not related to screen size. 

    Monday, September 5, 2016 9:46 AM
  • Hi Todor Dimitrov Todorov,

    Since I am not able to reproduce this issue, I suggest that you could upload your project on OneDrive, then provide this link, we will download and try to reproduce and resolve your issue.

    Thanks for your understanding.
    Tuesday, September 6, 2016 7:16 AM
  • Unfortunately the project is internal to my organization and I can't share it 
    Wednesday, September 7, 2016 8:34 AM
  • >>>Unfortunately the project is internal to my organization and I can't share it 

    Since you are not able to provide your project, I provide my sample code, you could test them, do you get same result:
    // Run a batch operation against the Word object model.
    Word.run(function (context) {
    
    // Create a proxy object for the content controls collection.
    var contentControls = context.document.contentControls;
    
    // Queue a command to load the id property for all of the content controls. 
    context.load(contentControls, 'id');
    
    // Synchronize the document state by executing the queued commands, 
    // and return a promise to indicate task completion.
    return context.sync().then(function () {
        if (contentControls.items.length === 0) {
            console.log('No content control found.');
        }
        else {
            // Queue a command to load the properties on the first content control. 
    
            return context.sync().then(function () {
    
                var pics = contentControls.items[0].inlinePictures;
                context.load(pics);
    
                return context.sync().then(function () {
                    var pic = pics.items[0];
                    context.trackedObjects.add(pics.items[0]);
                                
                    console.log("height:" + pic.height + " Width:" + pic.width);
    
                });
    
            });
        }
    });
    Thanks for your understanding.
    Thursday, September 8, 2016 6:39 AM
  • Hello I took your code and created a new sample Word project with Visual studio i replaced the highlight Longest word function in that sample project with your code ( just added some extra error handling):

        function hightlightLongestWord() {
    
            Word.run(function (context) {
    
                // Create a proxy object for the content controls collection.
                var contentControls = context.document.contentControls;
    
                // Queue a command to load the id property for all of the content controls. 
                context.load(contentControls, 'id');
    
                // Synchronize the document state by executing the queued commands, 
                // and return a promise to indicate task completion.
                return context.sync().then(function () {
    
                    if (contentControls.items.length === 0) {
                        console.log('No content control found.');
                    }
                    else {
    
                        // Queue a command to load the properties on the first content control. 
                       
                        return context.sync().then(function () {
    
                            var pics = contentControls.items[0].inlinePictures;
                            context.load(pics);
                            //console.log("This is it" + pics.items.length);
                            return context.sync().then(function () {
                                var pic = pics.items[0];                         
    
                                console.log("height:" + pic.height + " Width:" + pic.width);
    
                            });
    
                        }).catch(function (error) {
                            console.log("Error" + JSON.stringify(error));
                            if (error instanceof OfficeExtension.Error) {
                                console.log("Debug info: " + JSON.stringify(error.debugInfo));
                            }
                        });
                    }
                }).catch(function (error) {
                    console.log("Error" + JSON.stringify(error));
                    if (error instanceof OfficeExtension.Error) {
                        console.log("Debug info: " + JSON.stringify(error.debugInfo));
                    }
                });;
            });
        }

    Still getting the same problem 

    Original

    4.04 inches - 387px

    6.25 inches - 600px 

    Inline picture log output:

    height:291 Width:450.049987792969

    Some notes - things which I found out while trying this out:

    If I drag and drop the picture in the content control and try to load it I get this from the error handlers:

    Error{"name":"OfficeExtension.Error","code":"GeneralException","message":"GeneralException","traceMessages":[],"debugInfo":{"errorLocation":"InlinePicture._Id"}}

    this exception occurs right before the final context.sync() causing it to not get the Inline picture, I think the Id is just not getting generated when dragging and dropping a picture in word.

    However when I manually click on the Insert => Pictures => browse to file and insert it - that exception isn't raised and the InlinePicture is loaded in the javascript model successfully BUT still the height and width of that image is smaller than the original

    Many thanks for your help


    Friday, September 9, 2016 9:26 AM
  • Hi Todor Dimitrov Todorov,

    According to your description, I have retested this project and reproduced this issue.

    Get original size:

    Office Word Javascript API getting inlinePicture height and width:

    So I suggest that you could submit any feedback to OfficeDev UserVoice:

    https://officespdev.uservoice.com/

    Thanks for your understanding.

    Monday, September 12, 2016 7:40 AM
  • Is there any other place that I can submit this that it could get attention from the Office Dev guys ? 
    Monday, September 12, 2016 8:50 AM
  • Hi Todor Dimitrov Todorov,

    Sorry for my mistake, when you use Office Word Javascript API getting inlinePicture height and width, you do not get insert image's original size, but you will absolute height and width.

    Thanks for your understanding.

    Wednesday, September 14, 2016 7:28 AM
  • Hi David ,

    Sorry its my mistake I was always talking about the absolute values - they still don't match

    The Word.InlinePicture object has height and width smaller (seen in your proposed answer as well):

    1.74 height - 167 pixels

    6.5 width - 624 pixels

    and then console output is 125.25px and 467.700012207031px

    Wednesday, September 14, 2016 12:04 PM
  • Hi Todor Dimitrov Todorov,

    when you insert picture is small, you are able to get same value:

    When you insert picture is big, you will get different value:

    This picture have been shrink when you insert big picture.

    Monday, September 19, 2016 6:45 AM