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

【问题标题】：C# How get bitmap from dynamic <img> in code behind in .aspxC#如何在.aspx后面的代码中从动态<img>获取位图
【发布时间】：2019-03-06 22:21:14
【问题描述】：

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

【解决方案1】：

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

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

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

将其包含在您的脚本中。

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

【讨论】：

这简直太棒了！唯一的问题是我想我不知道如何正确解析它。我从字符串前面取下了data:image/webp;base64，并使用Convert.FromBase64String将其转换为字节数组。但是当我将它保存为 png 并尝试打开它时，它说格式无效。
我使用不带参数的canvas.toDataURL()，这应该会导致.png，例如。 data:image/png;base64,iVBORw0K... 您将逗号后面的最后一部分传递给Convert.FromBase64String。将生成的字节存储在MemoryStream 中并调用Image.FromStream。

【解决方案2】：

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

【讨论】：