ASP.NET Core中如何在Controller访问Image控件显示的图片文件

服务端Controller无法直接读取前端Image控件渲染在浏览器里的图片内容，你需要在发起请求时主动把图片资源随请求提交到后端，根据图片的来源差异，可以选对应的实现方式：

方案1：图片由服务端存储/下发 #

如果这两张图本来就是后端返回给前端的（比如存在服务器本地、对象存储、数据库中，Image的src是后端资源接口地址），不需要前端重复传图，按下面的逻辑实现即可：

• 页面渲染时，把两张图片的唯一标识（资源ID、存储路径）存到隐藏域或者按钮的自定义属性上
• 点击按钮发请求时，把两个图片标识作为请求参数传给Controller
• Controller拿到标识后，直接去对应存储位置读取图片文件做处理

前端示例代码：

<!-- 存储图片唯一标识的隐藏字段 -->
<input type="hidden" id="firstImgKey" value="upload/202405/001.jpg" />
<input type="hidden" id="secondImgKey" value="upload/202405/002.jpg" />
<img src="/file/read?path=upload/202405/001.jpg" alt="第一张图" />
<img src="/file/read?path=upload/202405/002.jpg" alt="第二张图" />
<button id="processBtn">开始处理图片</button>

<script>
document.querySelector('#processBtn').addEventListener('click', () => {
  const img1Key = document.querySelector('#firstImgKey').value;
  const img2Key = document.querySelector('#secondImgKey').value;
  // 提交请求
  fetch('/img/process', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({img1Key, img2Key})
  }).then(res => res.json())
    .then(result => {
      // 把返回的处理结果渲染到页面
    })
})
</script>

Controller接收示例：

[HttpPost]
public async Task<IActionResult> Process([FromBody] ImgProcessRequest req)
{
  // 根据传入的路径读取服务器上的图片文件
  var img1Path = Path.Combine(_webHostEnv.WebRootPath, req.Img1Key);
  var img2Path = Path.Combine(_webHostEnv.WebRootPath, req.Img2Key);
  await using var img1Stream = System.IO.File.OpenRead(img1Path);
  await using var img2Stream = System.IO.File.OpenRead(img2Path);
  // 执行你的图片处理逻辑
  var processResult = RunImageProcess(img1Stream, img2Stream);
  return Ok(processResult);
}

public class ImgProcessRequest
{
  public string Img1Key { get; set; }
  public string Img2Key { get; set; }
}

方案2：图片来自前端本地/前端做过修改 #

如果图片是用户本地上传后预览的、或者前端通过Canvas等方式修改过的，图片资源只存在于浏览器内存中，需要转成文件格式通过FormData提交到后端：

• 前端获取Image控件对应的图片资源，转成Blob/File对象
• 构造FormData实例，把两张图片作为表单项追加进去
• Controller通过IFormFile类型参数直接接收上传的图片流即可

前端提交示例：

document.querySelector('#processBtn').addEventListener('click', async () => {
  const formData = new FormData();
  const imgList = document.querySelectorAll('img');
  // 把Image控件展示的图片转成Blob对象
  const firstImgBlob = await fetch(imgList[0].src).then(res => res.blob());
  const secondImgBlob = await fetch(imgList[1].src).then(res => res.blob());
  formData.append('firstImg', firstImgBlob, 'first.jpg');
  formData.append('secondImg', secondImgBlob, 'second.jpg');

  const res = await fetch('/img/process', {
    method: 'POST',
    body: formData
  });
  const result = await res.json();
  // 渲染处理结果
})

Controller接收示例：

[HttpPost]
public async Task<IActionResult> Process(IFormFile firstImg, IFormFile secondImg)
{
  if (firstImg == null || secondImg == null)
    return BadRequest("未接收到有效图片");
  // 直接读取上传的图片流
  await using var img1Stream = firstImg.OpenReadStream();
  await using var img2Stream = secondImg.OpenReadStream();
  // 执行图片处理逻辑
  var processResult = RunImageProcess(img1Stream, img2Stream);
  return Ok(processResult);
}

注意：不要直接把图片的base64内容拼接在URL参数里传递，过长的参数会触发请求长度限制，文件类资源用FormData提交兼容性和稳定性最好。

内容的提问来源于stack exchange，提问作者Muhammad Usama Alam