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

Question

我正在使用视频标签来捕获网页中视频的屏幕截图并将其放入 img 元素中。然后我想将它发布到后面的代码中，以便我可以处理它的位图。我正在使用 UpdatePanel 进行回发。当我在调试器中运行它时，它会从视频中捕获图像，构建画布，将图像绘制到元素中，正确显示图像，然后在后面的代码中调用 Decode 函数。但是，解码函数后面的代码中的 img.src 是空白的。<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 然后您可以以编程方式设置源。