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&nbsp;ID="HiddenField"&nbsp;ClientIDMode="Static"&nbsp;runat="server"&nbsp;value=""&nbsp;&nbsp;/>将此包含在您的脚本中。document.getElementById("HiddenField").value&nbsp;=&nbsp;canvas.toDataURL('image/webp');

Answer 2

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