开发Word插件：如何在iPad版Word中获取选中图片的Base64？

我之前在适配Word插件跨平台时，也碰到过一模一样的问题——iPad版Word对手动插入的图片的DOM结构处理和桌面/web端完全不同，它不会直接把这类图片暴露为InlinePicture，而是包装在ContentControl或者Shape容器里，这就是你的代码在其他平台正常、但iPad返回undefined的核心原因。

下面是我验证过的兼容方案，同时覆盖iPad和其他平台的场景：

Word.run(function (context) { 
    // 获取选中范围
    var range = context.document.getSelection(); 
    
    // 1. 先加载选中范围内的ContentControls（iPad手动插入图片常在这里）
    var contentControls = range.contentControls;
    context.load(contentControls, 'items/inlinePictures');
    
    // 2. 同时加载文档中的Shapes（处理浮动图片的情况）
    var shapes = context.document.shapes;
    context.load(shapes, 'items/inlinePicture,isSelected');

    return context.sync().then(function () {
        var targetPicture = null;
        
        // 优先检查ContentControl中的图片
        if (contentControls.items.length > 0) {
            var ccPics = contentControls.items[0].inlinePictures;
            if (ccPics.items.length > 0) {
                targetPicture = ccPics.items[0];
            }
        }
        
        // 如果ContentControl里没找到，检查选中的Shape
        if (!targetPicture && shapes.items.length > 0) {
            const selectedShape = shapes.items.find(shape => shape.isSelected);
            if (selectedShape) {
                targetPicture = selectedShape.inlinePicture;
            }
        }
        
        // 最后回退到原逻辑（兼容桌面/web和编程插入的图片）
        if (!targetPicture) {
            targetPicture = range.inlinePictures.getFirstOrNullObject();
        }
        
        if (targetPicture) {
            context.load(targetPicture);
            const picBase64 = targetPicture.getBase64ImageSrc();
            return context.sync().then(function () {
                console.log("Base64 string is " + picBase64.value);
            });
        } else {
            console.log("未在选中区域找到图片");
        }
    });
}).catch(function (error) {
    console.error("处理图片时出错：", error.message);
});

关键逻辑说明： #

• ContentControl检查：iPad版Word会给手动插入的图片自动套一层ContentControl，所以我们需要先从选中范围的ContentControl里提取内嵌图片
• Shape检查：如果图片设置为浮动布局（非嵌入），iPad会将其识别为Shape，通过shape.inlinePicture可以获取到对应的图片对象
• 多平台兼容：保留了原有的InlinePicture逻辑，确保桌面端、Web端以及编程插入的图片仍能正常工作

额外注意事项： #

• 上述代码默认处理单张图片的选中情况，如果需要支持多选，可以循环遍历contentControls.items和shapes.items
• 建议在实际使用中添加更细致的错误捕获，避免因选中非图片内容导致的异常

内容的提问来源于stack exchange，提问作者Alexey Zelenkin