CODEWITHSUNDEEP
c#image-processingbitmapcode-behind
Velocedge
Velocedge

Reputation: 1475

C# How get bitmap from dynamic <img> in code behind in .aspx

I'm using a video tag to capture a screenshot of the video in a web page and put it into an img element. Then I want to post it to the code behind so I can process its bitmap. I'm using an UpdatePanel for the postback. When I run this in a debugger, it captures the image from the video, builds the canvas, draws the image into the element, displays the image correctly, and then calls the Decode function in the code behind. However, the img.src is blank in the code behind Decode function.

<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;
};

How can I get a bitmap of theImg in the code behind?

Upvotes: 0

Views: 349

Answers (2)

Bruno Warmling
Bruno Warmling

Reputation: 400

Try it by using asp:Image Then you can set the source programmatically.

Upvotes: 0

pfx
pfx

Reputation: 23369

The content of an image doesn't get included in the postback data.

Since you are using an UpdatePanel, you could add a HiddenField into which you also store the Base64 Data URI.
On postback, you can read and parse the content of this hidden field.

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

Include this in your script.

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

Upvotes: 1

Related Questions