如何获得选定的图像 [英] How to get selected image

问题描述

我有一个 Word 2016 插件，它使用 graphviz 创建图像并将相应的点代码存储在图像的 altdescription 中.我可以选择图像并将点代码加载回加载项中的编辑器.但这仅适用于我当前的 inlinePictures 实现.

I have a Word 2016 Add-in that creates images using graphviz and stores the corresponding dot code in the altdescription of the image. I can select the image and load the dot code back to the editor in the add-in. But this only works in my current implementation for inlinePictures.

        function getDataFromSelection() {


            Word.run(function (context) {

                var range = context.document.getSelection();
                var paragraphs = range.paragraphs;
                context.load(paragraphs);

                return context.sync().then(function () {

                    var pictures = paragraphs.items[0].inlinePictures;
                    context.load(pictures);

                    return context.sync().then(function () {
                        var picture = pictures.items[0];

                        editor.getSession().getDocument().setValue(picture.altTextDescription);
                    });
                });

            })
        }

选中的图片在文档中自由浮动如何获取?

How can I obtain the selected picture if it is free floating in the document?

插件的目标是使用点创建和编辑已创建的图形.但编辑部分目前是问题.

The Goal of the add in is to create and edit already created graphs using dot. But the editing part is currently the problem.

推荐答案

很好的问题.正如您正确推断出的 inlinePictures 集合仅包括，请原谅冗余，inlinePicture 图像.浮动图像不包含在该集合中，我们将在 API 的未来迭代中添加.

great question. as you properly deduced the inlinePictures collection only includes, excuse the redundance, inlinePicture images. Floating images are not included in that collection, something we will add in future iterations of the API.

我建议您采取一种解决方法来检查选择中是否有浮动图像.

There is a workaround that I suggest you to do to check if there are floating images in the selection.

您可以从选择中获取并分析OOXML，并发现选择中是否有任何浮动图像.

you can get and analyze the OOXML from the selection and find out of there are any floating images in the selection.

此代码显示了如何从选择中获取 OOXML:

this code shows how to get the OOXML from the selection:

   // Run a batch operation against the Word object model.
      Word.run(function (context) {

   // Queue a command to get the current selection and then 
   // create a proxy range object with the results.
      var range = context.document.getSelection();

   // Queue a commmand to get the OOXML of the current selection. 
      var ooxml = range.getOoxml();

   // Synchronize the document state by executing the queued-up commands, 
  // and return a promise to indicate task completion.
      return context.sync().then(function () {
      console.log('The OOXML read from the document was:  ' + ooxml.value);
      });  
}).catch(function (error) {
console.log('Error: ' + JSON.stringify(error));
if (error instanceof OfficeExtension.Error) {
    console.log('Debug info: ' + JSON.stringify(error.debugInfo));
    }
});

一旦您拥有 OOXML，您就可以实际获得(使用字符串搜索或 XML 编辑器)其中的内容，如果查找类似此元素的内容，您就会知道那里有一个浮动图像.您还可以获得如您所见的替代文本和描述.如果需要，您可以使用该字符串替换您需要的替代文本属性，并且可以写回 OOXML 以更新该浮动图像.它有点痛苦但可行，希望我们可以尽快发布浮动图像集！感谢和快乐编码！！！

Once you have the OOXML you can actually get (with string search or XML editors) what's within in the of if look for something like this element, you will know there is a floating image there. you can also get the alt text and description as you can see. if so needed you can use that string replace the alt text properties you need and can write back the OOXML to update that floating image. its a bit painful but doable and hopefully we can ship the floating images collection soon! thanks and happy coding!!!

   <w:drawing>
   <wp:anchor allowOverlap="1" layoutInCell="1" locked="0" behindDoc="0" relativeHeight="251659264" simplePos="1" distR="114300" distL="114300" distB="0" distT="0">
<wp:simplePos y="3710305" x="1729105"/>
<wp:positionH relativeFrom="margin">
  <wp:posOffset>1729105</wp:posOffset>
</wp:positionH>
<wp:positionV relativeFrom="margin">
  <wp:posOffset>3710305</wp:posOffset>
</wp:positionV>
<wp:extent cx="2847975" cy="2133600"/>
<wp:effectExtent r="9525" b="0" t="0" l="0"/>
<wp:wrapSquare wrapText="bothSides"/>
<wp:docPr title="alt text sample" name="Picture 1" descr="alt test description!!" id="1"/>
<wp:cNvGraphicFramePr>
  <a:graphicFrameLocks noChangeAspect="1" xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main"/>
</wp:cNvGraphicFramePr>
<a:graphic xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main">
  <a:graphicData uri="http://schemas.openxmlformats.org/drawingml/2006/picture">
    <pic:pic xmlns:pic="http://schemas.openxmlformats.org/drawingml/2006/picture">
      <pic:nvPicPr>
        <pic:cNvPr name="stratus2.jpg" id="1"/>
        <pic:cNvPicPr/>
      </pic:nvPicPr>
      <pic:blipFill>
        <a:blip r:embed="rId4">
          <a:extLst>
            <a:ext uri="{28A0092B-C50C-407E-A947-70E740481C1C}">
              <a14:useLocalDpi val="0" xmlns:a14="http://schemas.microsoft.com/office/drawing/2010/main"/>
            </a:ext>
          </a:extLst>
        </a:blip>
        <a:stretch>
          <a:fillRect/>
       </a:stretch>
      </pic:blipFill>
      <pic:spPr>
        <a:xfrm>
          <a:off y="0" x="0"/>
          <a:ext cx="2847975" cy="2133600"/>
        </a:xfrm>
        <a:prstGeom prst="rect">
          <a:avLst/>
        </a:prstGeom>
      </pic:spPr>
    </pic:pic>
  </a:graphicData>
   </a:graphic>
   </wp:anchor>
  </w:drawing>

这篇关于如何获得选定的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！