时间戳

首页 > 解决方案 > C#如何从.aspx后面的代码中动态获取位图

c# - C#如何从.aspx后面的代码中动态获取位图

问题描述

我正在使用视频标签来捕获网页中视频的屏幕截图并将其放入 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 的位图？

标签： c#image-processingbitmapcode-behind

解决方案

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

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

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

将此包含在您的脚本中。

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

推荐阅读