Question

我正在使用视频标签来捕获网页中视频的屏幕截图，并将其放入img元素中。然后，我想将其发布到后面的代码中，以便处理其位图。我正在使用UpdatePanel作回发。当我在调试器中运行此程序时，它会从视频中捕获图像，构建画布，将图像绘制到元素中，正确显示图像，然后在后面的代码中调用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/>获取位图

2 个答案: