I have a C# webbrowser that holds an html page that has several iframes. Each iframe holds an arbitrary html file, often with images. The img tags often don't have any width or height attributes (ie, it's often just <img src="someimage.jpg">).
I've read about how to size iframes based on their content, and have gotten it to work using jquery. The following jquery snippet is present in the iframe's html:
$(document).ready(function() {
$('img').each(function(){
$(this)
.bind('load readystatechange', function(e) {
var iframes = window.top.document.getElementsByName(window.name);
if (iframes.length == 1) {
window.top.DoResizeFrame(iframes[0]);
}
})
});
DoResizeFrame is defined in the parent html file (the one that the webbrowser is showing):
function DoResizeFrame(fr) {
if (fr && fr.Document && fr.Document.body) {
fr.style.height = fr.Document.body.scrollHeight + 'px';
fr.style.width = fr.Document.body.scrollWidth + 'px';
}
}
I also call DoResizeFrame from the parent document's $(document).ready event. This works great - if there are no images, the document's ready event triggers a resize. If there are images, each time an image is finished loading, the iframe is properly resized.
However, loading a large image causes the iframe to be improperly sized until the image is completely loaded. Since I rarely have the width and height attributes in the image tag to work with, I figured I could use jquery to listen to the readystatechange event of the image, and when it's "loading", pick up the size of the image and properly size the iframe even while the image is still loading. Unfortunately, at least in IE7, readystatechange=loading only happens after the image is done being downloaded.
Does anyone have any ideas how I can detect the size of an image referenced in my html simply by "<img src="someimage.jpg">" without waiting for the entire download to happen? I'm trying to provide the best user experience by sizing everything correctly, so that the user can read the rest of the iframe even if a large image is taking a while to download.
thanks!
jean
One dependable way to be sure is to ask the server the size of the image before downloading it. I've done this using .net, it's quite easy.
Related
I have this problem for I can't find proper solution.
On website trovo.live I'm trying to change profile picture with code. There is 'Upload' button, which opens SelectFileDialog.
When I try to find input tag via document.getElementsByTagName("input") it doesn't find any input for uploading. (So I can't just do element.SendKeys() )
It works this way, when I select file in dialog then website converts it into data URI and set it as < img > src + it sets style = transform: matrix(values params)
So I found this solution that I convert image into data URI and set it as src parameter like website do it. Also I calculate matrix parameter values.
My problem is when I click save button later, website for some reason resets my css style and then picture is saved with bad positioning
After I change src by code (transform style remains from previous avatar)
This is how it looks when I upload manualy by Upload button or I can matrix() values
But when I click save button, it saves like that first picture, like it wouldn't count in my matrix() values. Can I somehow get into save button function and force in my matrix() edit? Or simulate Upload function without pressing button?
Or how can I handle selectFileDialog in selenium when
No < input > in HTML code
I can't use System.Windows.Forms.SendKeys.SendWait(path);
I also tried to use AutoItX, but I had some problems with their library in my project and I would like to handle it without libraries if possible.
Thank you very much for all answers :)
**edit
I found .js file which contains code for it, but I have no idea how to call for example method for resizing on method image code for javascript
recently, I've been developing a website with .NET c# and I've been trying to display images via the imagepath in the db. It is currently working by this line of code.
return File(byte array, "image/jpeg");
The problem is that by this line of code the layout page is completely ignored as only the image with white background is shown. I need to display the image along with the return view (the image inside the layout of the website). thx
The reason you're not seeing anything is because you can only have one type of response per request; Either a response containing HTML or a response containing the image.
What you need to do in order to serve images via your application is set up a route that you can put in your <img> tags as the src attribute.
<img src="/static/images/123">
Your route would listen for requests on the /static/images/ path and then try to parse the ID number at the end. It could then take that ID number (123) and look up the relevant image in your database.
So, to be clear, you'd have at least two requests that occur; First, you serve the request for the page, then you serve subsequent requests for the image(s). These two request handlers do not share the same code.
Finally, if you really wanted to "inline" an image as part of the page response, The only way you can "inline" an image into a page is to base64 encode it and set that as as the src of an <img> tag. This process is slow and bloats your HTML, making it take longer to load.
I have a command line C# server and an ASP.NET client, they both communicate via .NET Remoting. The server is sending the client still images grabbed from a webcam at say 2 frames a second. I can pass the images down to the client via a remote method call and the image ends up in this client method:
public void Update(System.Drawing.Image currentFrame)
{
// I need to display the currentFrame on my page.
}
How do i display the image on the a page without saving the image to the hard disc? If it was a winForms app i could pass currentFrame to a picturebox ie. picturebox.Image = currentFrame.
The above Update method gets fired at least 2 times a second. If the client was a winForms app i could simply put picturebox.Image = currentFrame and the current frame on the screen would automatically get updated. How do i achieve the same effect with ASP.NET? Will the whole page need to be reloaded etc? I want to basically make it look like a live video feed!
You have left one player out of your game: the browser. Your question really is: how do I make the browser, on some random computer in the Internet, update an image it is displaying based on what's happening in a server.
The answer, of course, is: you don't.
You can place the image inside of an UpdatePanel, and update the panel based on a timer. The URL for the src property of the image would have to lead to a HttpHandler (.ashx file) of your own, that would call the server to get the latest image.
Always remember how the Web works: the browser is in control, not the server side.
P.S. .NET Remoting has been deprecated in favor of WCF.
You will need to have a page or handler on the server to render the image. That's its job. Then you can have javascript in place on the page that displays the image that acts on a timer (window.setTimeout) and is constantly polling the server for an updated image. You probably want to make the request somewhat dynamic in the querystring so you don't get stuck redisplaying a cached image instead of a new image delivered by the server. Something like
<script type="text/javascript" language="javascript">
i = 0;
window.setTimeout(updateImage, 500);
var img = document.getElementById('img_to_update');
function updateImage() {
img.src = 'imageRenderer.aspx?req=' + i;
i += 1;
window.setTimeout(updateImage, 500);
}
</script>
Where i only serves to keep the request unique to prevent caching issues.
Anyway, is that the exact script? Perhaps not, I wrote it off the top of my head and it has been a while since I've done anything similar. But it should give you an idea of how you can achieve part of this client-side indepenent of the server side technology. (This script could be on any page, static or dynamically rendered.)
I am loading a css file dynamically by making the link style attribute a server tag.
All of the css loads fine except for the image. It just shows the alternate text. I am doing this in the page_load event.
Here is a snippet of my img markup:
<img class="logourl" alt="Header" />
Here is a the css for logourl:
.logourl
{
background-image:url(../images/a-logo.png);
width:169px;
height:61px;
margin-top:5px;
}
When I right-click on the image and view properties, it is blank (size, address, etc).
<img class="logourl" alt="Header" />
Can an <img> tag have a background-image property???? That doesn't even make sense.
According to MSDN, the img object doesn't have this property, so I'd say it's safe to assume it's not supported in IE.
Are you sure you don't want a span, a hyperlink, or some other property where a background-image would make sense?
edit
I just read #Justin Grant's answer. I guess that you can use a background image on an image tag, but I'm keeping my answer because it seems a silly way to do it. if what you want is a frame around your image, I would create a div or span with a set width and height, and an img slightly smaller inside it.
I wouldn't call that loading the CSS file dynamically. You are setting the attribute in the link tag dynamically, but the CSS file is loaded the same way as any other CSS file. The browser doesn't see any difference from any other link tag, so the dynamically set url is not part of the problem.
Where are the image and the css files located? Remember that the url is relative to where the CSS file is, not where the page is.
Note that even if you mangage to set the background image for the image, it will still show the alt text on top of the image and indicate that the image is not loaded. The background-image attribute does not set the source of the image. You should just use a div element instead of the image element.
To put a background-image on an IMG tag, according to http://www.contentwithstyle.co.uk/content/css-background-image-on-html-image-element you'll need to apply a CSS padding and make sure you're using display:block.
Also, if this is a directory-path issue, the image must be relative to the location of the CSS file it's referenced from. Try using an absolute path to verify that this is indeed the problem, then experiment with various relative paths to see if that it gets solved.
If it's still unsolved at that point, I'd suggest trying Fiddler (www.fiddlertool.com) which will let you see HTTP requests being made-- specifically the actual URL being requested by your browser. Make sure to clear your cache first before reloading the page under Fiddler, so you'll be sure to actually make the request and not pull from cache. Anyway, there will be three possible cases:
Fiddler does not show you requesting a URL at all. This points to some issue with your CSS (e.g. not being loaded properly, or a syntax error)
Fiddler shows the image URL being requested, but it shows a 404 (not found) or other error. this means the wrong URL is being requested, or there's a problem with your web site's serving of images from that folder
Fiddler shows the correct URL, and it's getting a 200 status (success) from the server. If this happens, I'm stumped!
Right-click will only show you SRC of an IMG tag. when using a background CSS, you'll need view source.
I'm generating a coupon based on dynamic input and a cropped image, and I'm displaying the coupon using ntml and css right now, the problem is, printing this has become an issue because of how backgrounds disappear when printing and other problems, so I think the best solution would be to be able to generate an image based on the html, or set up some kind of template that takes in strings and an image, and generates an image using the image fed in as a background and puts the coupon information on top.
Is there anything that does this already?
This is for an ASP.NET 3.5 C# website!
Thanks in advance.
edit: It'd be great if the output could be based on the HTML input, as the coupon is designed by manipulating the DOM using jQuery and dragging stuff around, it all works fine, it's just when it comes to the printing (to paper) it has z-indexing issues.
What you can do is create an aspx page that changes the response type to be in the format you want and then put the image into the stream. I created a barcode generator that does a similar thing. Excluding all the formalities of generating the image, you'll Page_Load will look something like this:
Bitmap FinalBitmap = new Bitmap();
MemoryStream msStream = new MemoryStream();
strInputParameter == Request.Params("MagicParm").ToString()
// Magic code goes here to generate your bitmap image.
FinalBitmap.Save(msStream, ImageFormat.Png);
Response.Clear();
Response.ContentType = "image/png";
msStream.WriteTo(Response.OutputStream);
if ((FinalBitmap != null)) FinalBitmap.Dispose();
and that's it! Then all you have to do in your image is set the URL to be something like RenderImage.aspx?MagicParm=WooHoo or whatever you need. That way you can have it render whatever you want to specify.
You can render html to a bitmap using the WebBrowser control in either a winforms or console application.
An example of this can be found here: http://www.wincustomize.com/articles.aspx?aid=136426&c=1
The above example can be modified to run in ASP.Net by creating a new STAThread and performing an Application.Run on it to start a new message loop.
PHP/Ruby Alternative
If you have accessed this question and are actually looking for soething that will work without Windows, you can try the KHTML library: http://wiki.goatpr0n.de/projects/khtmld
The website has a ridiculous name I admit, but I can assure you it is genuine. Other related pages are: the sourceforge page http://khtml2png.sourceforge.net/
Try PDFSharp...it's not exactly a "take this HTML and make a PDF" but with a small amout of fiddling you can easily make a PDF out of the info you are using to make the HTML.
MARKUP ONLY ALTERNATE SOLUTION
Use SVG and XSLT to transform the html data into an image that can be rendered/saved/etc.
I'll admit that at first it was tedious getting this to work because of all of the coordinates, but well worth the effort once it is running.
There is a very powerful image creation library called GD which I often use with PHP.
I am led to believe there is a wrapper for this library that ASP programmers can use. Try this
Unless the "other problems" are pretty severe, couldn't you just instruct your users to turn on Background Images when printing?
In any case, I'd default to serving a PDF rather than an image, doubly so since it is intended for print.
Just set up your css properly, so that you have a css file targeted at the print medium. It is pretty easy to guarantee that the coupon will always be legible, without worrying about whether they have bg images on or not. Needlesly moving to an image doesn't make any sense, unless there is some reason you don't want it to be machine readable.
I haven't tried to myself, but you should be able to render HTML into an image by using the WebBrowser control and the DrawToBitmap() method inherited from the base Control class.
UPDATE: I tried this myself and there are some caveats. The WebBrowser control doesn't seem to render the web page until the control is show, so the WebBrowser needs to be in a Form and the Form must be shown for the HTML to be rendered and the DocumentCompleted event to be raised.