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?
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');
Try it by using asp:Image
Then you can set the source programmatically.
Related
I create a link button and put an image on it.
Here is my code:
<asp:LinkButton ID="LinkButton1" runat="server" Text="">
<asp:Image ID="Image1" ImageUrl="" runat="server" />
</asp:LinkButton>
And here is my subsequent C# code:
if(!Page.IsPostBack)
{
LinkButton1.OnClientClick = "ClientClick()";
Image1.ImageUrl = "~/Images/embed.png";
}
I provide the ImageUrl from the c# code behind for the Image and add an OnClientClick event from c# code for the Link Button. When the page first load then the button showed properly.
My browser rendered HTML before post back
<a onclick="ClientClick();" id="MainContent_LinkButton1"
href="javascript:__doPostBack('ctl00$MainContent$LinkButton1','')">
<img id="MainContent_Image1" src="Images/embed.png">
</a>
When I press any button in this page and PostBack occurs, then the button disappears but I don't do anything in my code behind for that button for PostBack.
My browser rendered HTML after post back
<a onclick="ClientClick();" id="MainContent_LinkButton1"
href="javascript:__doPostBack('ctl00$MainContent$LinkButton1','')">
</a>
If I do not add OnClientClick or Text for the Link Button then the image does not disappear.Or if I set ViewState false for link button then image does not disappear. So why this button disappear when page is PostBack?
With EnableViewState="true" this code works correct even with post back and the image is shown
<asp:LinkButton ID="LinkButton1" runat="server" Text="">
<asp:Image ID="Image1" ImageUrl="" runat="server" />
</asp:LinkButton>
if(!Page.IsPostBack)
{
LinkButton1.OnClientClick = "ClientClick()";
Image1.ImageUrl = "~/Images/embed.png";
}
With EnableViewState="false" You must remove the IsPostBack because is not saved anywhere and you need to add it again
// remove that check if EnableViewState is false
//if(!Page.IsPostBack)
{
LinkButton1.OnClientClick = "ClientClick()";
Image1.ImageUrl = "~/Images/embed.png";
}
This occurs because Postback clears all the control of your asp.net page.
To retain controls from previous load, you need to make sure that whatever code is in Page_Load() is re-executed on "Button_click" which causes postback.
void button_click()
{
// do stuff
page_load(Dummy Object);
}
I have a website developed by using ASP.NET. In there lot of ajax request are happening. So I want to display a image when ajax request is happening and hide the image after data loaded. Now this is works fine,
Here what I did so far
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="uppnlLocation">
<ProgressTemplate>
<img src="images/loading.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="uppnlLocation">
<ContentTemplate>
<asp:DropDownList ID="ddContinents" runat="server" CssClass="form-control" OnSelectedIndexChanged="ddContinents_SelectedIndexChanged" AutoPostBack="true"> </asp:DropDownList>
<asp:TreeView runat="server" ID="tvCountries" OnSelectedNodeChanged="tvCountries_SelectedNodeChanged"></asp:TreeView>
</ContentTemplate>
</asp:UpdatePanel>
So in above code when a user select a continent from the dropdown list the countries which belongs that continent will be load to the below treeview. So I want to display a loading image when a user select a continent from the dropdown while loading the countries. Now this is working. But the problem is when user select a tree node in treeview It also shows this progress control image. I don't want to display that image on that action. How to disable it?
I saw a post regarding this.
Is there a way to disable UpdateProgress for certain async postbacks?
I implemented it. but then postback is not happening for the dropdown menu.
So how to achieve this?
Thank you very much.
Its better just to use the DisplayAfter parametre to raise the delay that this is appears because I understand that this just happening so fast. Do not go with complicate javascript solutions just add a delay of 1 or 2 seconds...
<asp:UpdateProgress ID="UpdateProgress1"
runat="server" AssociatedUpdatePanelID="uppnlLocation" DisplayAfter="2000">
<ProgressTemplate>
<img src="images/loading.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
Well why not just use javascript to force it display none if you are okay with it...
For normal update panel and to call update progress is not always show up. Better to use javascript to pop up update progress rather than using default ways.
Code to pop up Update Progress
function showUpdateProgress() {
var updateProgress = document.getElementById("<%=upProgress.ClientID%>");
updateProgress.style.display = 'block';
}
function HideUpdateProgress() {
var updateProgress = document.getElementById("<%=upProgress.ClientID%>");
updateProgress.style.display = 'none';
Sys.Application.remove_load(HideUpdateProgress);
}
If you are using this way when your job is done in Code behind u need to call javascript to hide the update progress
As per following
In CS file
ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "Script", "Sys.Application.add_load(HideUpdateProgress);", true);
Hope this help you
I have a website where the user can select different cards. I need a way where when a new card is selected then the page does not refresh. When I click the back button now it just goes back to previous selections. I need it to go back to the previous page. Here is the code for the image change
<div class="imgCard" style="padding-right: 50px">
<asp:ScriptManager ID="ScriptManager" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="conditional">
<ContentTemplate>
<fieldset style="border-width: 150px; border-style: none">
<asp:Image ID="imgCardChoice1" runat="server" />
<br />
<br />
<a id="openChange1" href="#" style="color: Red">Change Card</a>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
</div>
When the user clicks on "Change Card" then a jquery modal box opens and allows them to change the card. Thank you for any help/advice. If needed the code behind to select a new card is in C#.
Without knowing more, it sounds like you need to use AJAX to do that. If you are already using jQuery, check out jQuery.load(). You can make an AJAX request to a url on your site that will only return the image information and load that into the element you specify.
Here is a link to the docs:
http://api.jquery.com/load/
Try to use some javascript function.
create a div where you want to put your image.
then give him an ID, on javascript function call the div id and change the src to the image that you want to put.
on your link or wathever you have to change the image, call the onclick function and use the javascript function.
On my website i have 2 images, that onmouseover change an image in other div completely different.
see it on:http://roundhillevents.com
and pass the cursor on the facebook and on the youtube logo's.
If nothing appears, let stay the cursor over that a little while.
PS: Only works with forefox and don't know why.
I have a master page that contains an image as follow:
<asp:Image ID="imgCompanyLogo" runat="server" ImageUrl="image path" />
and in a child page I want to edit the property ImageUrl as follow:
Image imgCompanyLogo = (Image)Page.Master.FindControl("imgCompanyLogo");
imgCompanyLogo.ImageUrl = ResolveUrl("~/images/CompanyLogo/Logo.png");
and it doesn't give me an exception, but it doesn't change anything.
Note: I have an UpdatePanel in the child page.
Since the image is sitting outside of the UpdatePanel, server side changes will not be executed on the image after a partial postback. Your only option is to inject JavaScript into the page and change the image URL.
Use the ScriptManager.RegisterStartupScript Method to inject JavaScript after the partial postback.
Something like the following will work for you:
C#
protected void btnPostback_Click(object sender, EventArgs e)
{
imgCompanyLogo.ImageUrl = ResolveUrl("~/images/CompanyLogo/Logo.png");
ScriptManager.RegisterStartupScript(btnPostback,this.GetType(), "myScript", "ChangeImage('" + ImageUrl + "');",false);
}
JavaScript
function ChangeImage(imgURL) {
//make sure the ID of the image is set correctly
document.getElementById('imgCompanyLogo').src = imgURL;
}
Wrap image by UpdatePanel with UpdateMode="Always"
Master Page:
<asp:UpdatePanel runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:Image runat="server" ID="Image1" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
public void SetImageUrl(string url)
{
Image1.ImageUrl = url;
}
Child Page:
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Button Text="Click Me" runat="server" OnClick="UpdateImage" />
</ContentTemplate>
</asp:UpdatePanel>
protected void UpdateImage(object sender, EventArgs e)
{
((Main)Master).SetImageUrl("~/Images/0306d95.jpg");
}
The code above works well for me.
Have a look at Sys.WebForms.PageRequestManager Class. Define handler in javascript and may change the image source.
If your code is being run after an async postback (per your UpdatePanel) then changes to anything outside the UpdatePanel will not be rendered. Content in the master page would definitely seem to qualify.
If this is what you're trying to do, this model won't really work. You will need to use some client script to effect changes to already-rendered content when working with this model.
An UpdatePanel is a construct to identify an area that's updated through ajax. The page is not actually reloaded. So an postback can never change content that's outside of the UpdatePanel (or control bound to that panel) that sourced it.
Here's a basic implementation (using jQuery). Add a hidden field to pass the new source to the client. This must be inside the UpdatePanel. Change this value from the server when you want the image to update with new_image_src.Value=ResolveUrl(...);
<asp:HiddenField ClientIdMode="Static" runat="server" id="new_image_src"
value="" EnableViewState="false">
Give your image a static id too to make life easier:
<asp:Image ClientIdMode="Static" runat="server" id="dynamic_image" ImageUrl="..." >
Add javascript to the page (should NOT be in the UpdatePanel):
function updateImage() {
var new_src=$('#new_image_src');
if (new_src) {
$('#dynamic_image').attr('src',new_src);
/// erase it - so it won't try to update on subsequent refreshes
new_src.val('');
}
}
$(document).ready(function() {
/// adds an event handler after page is refreshed from asp.net
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(updateImage);
});
This wouldn't be difficult to do without jquery either but seems more common than not these days.
I am trying to load an asp image box <asp:Image ID="imgPicture" width="200" height="200" runat="server" /> with an image after a user has selected one using the asp.net fileupload control <asp:FileUpload ID="fluPicture" runat="server" OnChange="LoadImage(this.value, 'imgPicture');" Width="200"/>
HTML
<asp:Image ID="imgPicture" width="200" height="200" runat="server" />
<asp:FileUpload ID="fluPicture" runat="server" OnChange="LoadImage(this.value, 'imgPicture');" Width="200"/>
Javascript
<script type="text/javascript">
function LoadImage(path, img) {
imgPrev = document.images[img];
imgPrev.src = path;
}
</script>
The image will not load in the imgPicture control. Also I noticed that by adding an alert to the javascript function to alert the path and image, that the path is C:\fakepath\ImageName.jpg. I am unsure why it says fakepath.
Any help is appreciated. Also note that this project has a C# code file behind it.
After all of your input, I have changed my FileInput control code to be as follows:
<asp:FileUpload ID="fluPicture" onchange="if (confirm('Upload ' + this.value + '?')) this.form.submit();" runat="server" Width="200"/>
I then added a test to the Page.OnLoad event to determine if the file is ready to be
uploaded.
if (fluPicture.PostedFile != null && fluPicture.PostedFile.ContentLength > 0) UploadImage();
Then I allowed the UploadImage() method to upload the image, store it, and then set the url of the imagebox to the uploaded image's url.
Thank you all for your help and input. Also, I appreciate the jQuery ideas. In this instance I just needed something quick and dirty to get the job done.
You file is not uploaded until you do a post back, it sounds like your only browsing to the file and then trying to get a thumbnail before you post back/upload the image.
ASP.Net (HTML) CODE :
<asp:FileUpload ID="FileUpload1" runat="server" Height="22px" onchange="showImage()"/>
<asp:Image ID="Image1" runat="server" Width="200PX" Height="200PX" />
JAVASCRIPT CODE :
function showImage()
{
// Get File Upload Path & File Name
var file = document.getElementById("FileUpload1");
// Set Image Url from FileUploader Control
document.getElementById("Image1").src = file.value;
// Display Selected File Path & Name
alert("You selected " + file.value);
// Get File Size From Selected File in File Uploader Control
var inputFile = document.getElementById("FileUpload1").files[0].size;
// Displaty Selected File Size
alert("File size: " + inputFile.toString());
}
I think That can Help You. its perfectly run on my pc.