SharePoint图片上传与处理：自动生成带图PPT并转存至图片库

方案一：Power Automate（推荐，无/低代码） #

这是最省心的实现路径，不需要深度编码就能完成全流程：

• 触发机制：创建一个Power Automate流，用「当SharePoint列表项创建或修改时」作为触发器，关联你的目标列表。
• 加载模板：从SharePoint文档库中读取提前准备好的PPT模板（模板需预先设置好图片占位符和文本框，并给它们命名，比如SlideImage和ImageCaption，方便后续映射）。
• 填充内容：使用「填充Microsoft PowerPoint模板」动作，将列表中的图片URL（需获取绝对可访问地址）和说明文字，对应映射到模板的占位符上。
• 导出图片：用「将幻灯片导出为图片」动作，指定模板中的目标幻灯片编号，生成PNG/JPG格式的图片文件。
• 上传至图片库：通过「创建文件」动作，把导出的图片上传到目标SharePoint图片库。

注意：确保PPT模板的占位符名称与流中映射的字段完全匹配，同时列表图片字段的URL需具备公开访问权限（或流运行账号有权限访问）。

方案二：PowerShell脚本（适合自定义需求场景） #

如果需要更灵活的控制逻辑，可结合SharePoint Online PowerShell模块和PPT处理库实现：

• 连接SPO站点：用Connect-PnPOnline命令登录你的SharePoint站点，拉取列表中的图片和说明数据。
• 操作PPT模板：使用OpenXML SDK或第三方库（如GemBox.Presentation）加载PPT模板，定位目标幻灯片，替换图片占位符内容并设置文本框文字。
• 导出幻灯片为图片：通过库的导出功能将指定幻灯片保存为图片文件。
• 上传至图片库：用Add-PnPFile命令将生成的图片上传到目标图片库。

核心代码片段示例：

# 连接SharePoint Online
Connect-PnPOnline -Url "https://yourtenant.sharepoint.com/sites/yoursite" -Interactive

# 获取目标列表项
$listItems = Get-PnPListItem -List "你的列表名称" -Fields "Title", "ImageField", "Description"

# 加载PPT模板（以GemBox.Presentation为例，需先安装NuGet包）
[GemBox.Presentation.PresentationDocument]::Load("C:\Templates\SlideTemplate.pptx") | Out-Null
$slide = $presentation.Slides[0]

# 替换图片占位符
$imageUrl = $listItems[0]["ImageField"].Url
$imagePart = $slide.Content.AddImagePart([GemBox.Presentation.ImageContentType]::Png)
$imagePart.FeedData((New-Object System.Net.WebClient).OpenRead($imageUrl))
$picture = $slide.Content.AddPicture($imagePart, [GemBox.Presentation.Length]::FromCentimeters(10), [GemBox.Presentation.Length]::FromCentimeters(10))

# 设置说明文字
$textBox = $slide.Content.TextBoxes.FirstOrDefault({ $_.Name -eq "CaptionTextBox" })
$textBox.Text.AddParagraph().AddRun($listItems[0]["Description"])

# 导出为图片
$slide.Save("C:\Temp\OutputSlide.png", [GemBox.Presentation.ImageSaveOptions]::Png())

# 上传到图片库
Add-PnPFile -Path "C:\Temp\OutputSlide.png" -Folder "图片库名称"

方案三：跳过PPT模板，直接生成图片 #

如果不需要严格依赖PPT模板，可直接合成带图片和文字的图片文件，省略PPT环节：

前端SPFx实现（解决之前JS+HTML的问题） #

利用HTML5 Canvas在SPFx WebPart中直接合成图片，避免跨域和权限问题：

// 从SharePoint列表获取数据
const items = await sp.web.lists.getByTitle('你的列表').items.select('Title', 'ImageField', 'Description').get();

// 处理每个列表项
items.forEach(async (item) => {
  const imgRelativeUrl = item.ImageField.ServerRelativeUrl;
  // 通过SPFx上下文获取图片绝对URL
  const absoluteImgUrl = `${this.context.pageContext.web.absoluteUrl}${imgRelativeUrl}`;
  
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const img = new Image();
  
  // 解决跨域问题
  img.crossOrigin = 'anonymous';
  img.onload = () => {
    // 设置画布尺寸（图片+边距+文字区域）
    canvas.width = img.width + 40;
    canvas.height = img.height + 60;
    
    // 绘制白色背景
    ctx.fillStyle = '#fff';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // 绘制图片（带边距）
    ctx.drawImage(img, 20, 20);
    
    // 绘制说明文字（居中对齐）
    ctx.fillStyle = '#333';
    ctx.font = '16px Arial';
    ctx.textAlign = 'center';
    ctx.fillText(item.Description, canvas.width / 2, img.height + 45);
    
    // 转成Blob并上传到图片库
    canvas.toBlob(async (blob) => {
      const fileName = `${item.Title}.png`;
      await sp.web.getFolderByServerRelativeUrl('/sites/yoursite/图片库').files.add(fileName, blob, true);
    });
  };
  
  img.src = absoluteImgUrl;
});

后端PowerShell合成 #

用System.Drawing类直接合成图片：

Add-Type -AssemblyName System.Drawing

# 获取列表数据（同方案二）
$listItem = Get-PnPListItem -List "你的列表" -Id 1 -Fields "ImageField", "Description"
$imgUrl = $listItem["ImageField"].Url
$description = $listItem["Description"]

# 加载图片
$webClient = New-Object System.Net.WebClient
$imgBytes = $webClient.DownloadData($imgUrl)
$ms = New-Object System.IO.MemoryStream($imgBytes)
$img = [System.Drawing.Image]::FromStream($ms)

# 创建画布（原图片高度+60像素用于文字）
$canvas = New-Object System.Drawing.Bitmap($img.Width + 40, $img.Height + 60)
$graphics = [System.Drawing.Graphics]::FromImage($canvas)

# 绘制背景和图片
$graphics.FillRectangle([System.Drawing.Brushes]::White, 0, 0, $canvas.Width, $canvas.Height)
$graphics.DrawImage($img, 20, 20)

# 绘制文字
$font = New-Object System.Drawing.Font("Arial", 16)
$brush = [System.Drawing.Brushes]::Black
$textSize = $graphics.MeasureString($description, $font)
$x = ($canvas.Width - $textSize.Width) / 2
$y = $img.Height + 20 + 25
$graphics.DrawString($description, $font, $brush, $x, $y)

# 保存图片
$canvas.Save("C:\Temp\Output.png", [System.Drawing.Imaging.ImageFormat]::Png)

# 上传到SPO
Add-PnPFile -Path "C:\Temp\Output.png" -Folder "图片库"

内容的提问来源于stack exchange，提问作者Daniel Evans