C# 如何从 .aspx 中的代码隐藏中的动态 <img> 获取位图

Question

我正在使用视频标签捕获网页中视频的屏幕截图并将其放入 img 元素中。然后我想 post 它到后面的代码，这样我就可以处理它的位图。我正在为 postback 使用 UpdatePanel。当我在调试器中运行 this 时，它从视频中捕获图像，构建 canvas，将图像绘制到元素中，正确显示图像，然后在后面的代码中调用 Decode 函数.但是，img.src 在 Decode 函数后面的代码中是空白的。

<asp:UpdatePanel runat="server" UpdateMode="Conditional" EnablePartialRendering="true"/>
<asp:Button runat="server" AutoPostBack="true" OnClientClick="return screenshotButton()" OnClick="Decode" Text="Capture"></asp:Button>
<canvas id="theCanvas" style="display: none;"></canvas>
<img runat="server" Name="theImg" Id="theImg"/>
</asp:UpdatePanel>

...

function screenshotButton() {
    canvas.width = videoElement.videoWidth;
    canvas.height = videoElement.videoHeight;
    canvas.getContext('2d').drawImage(videoElement, 0, 0);
    theImg.src = canvas.toDataURL('image/webp');
    return true;
};

如何获取后台代码中theImg的位图？

Answer 1

图像的内容不包含在回发数据中。

由于您使用的是 UpdatePanel，因此您可以添加一个 HiddenField，您还可以在其中存储 Base64 数据 URI。
在回发时，您可以读取和解析此隐藏字段的内容。

<asp:HiddenField ID="HiddenField" ClientIDMode="Static" runat="server" value=""  />

将其包含在您的脚本中。

document.getElementById("HiddenField").value = canvas.toDataURL('image/webp');

Answer 2

使用 asp:Image 试试然后您可以以编程方式设置源。

C# 如何从 .aspx 中的代码隐藏中的动态 <img> 获取位图

C# How get bitmap from dynamic <img> in code behind in .aspx

c#

bitmap

image-processing

code-behind