I'm working on a project which requires to save the current page in an image. I found some examples in Javascript to create a blob of page, but what I would like to do is save the page in a file.
My question is, is it possible to save the content of a page in an image file?
Does a plugin exist to do it directly ?
If not, is it possible to save the blob and render the blob in C# to create an image?
To save a page as an image, you can use http://html2canvas.hertzen.com/
Example:
var canvas = document.getElementById("mycanvas");
var img = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');
Related
I want to render a html-page with the C#-Webbrowser Form.
Normally I receive the html file from another application. For simplicity I just read the html page from the hard drive into a stream and then I set the webBrowserControl to this content.
That works in general. But now I want the html file to reference to images in the imageList.
I don't want to save the images to the hard drive.
Is there any possibilty to reference images in RAM with HTML.
The common way like
<img src="C:\\pic.png"/>
is obviously not possible.
Explanation Code
Image image = Image.FromFile(src_pathfile); //normally from another application over interface
List<Image> imageList = new List<Image>();
imageList.Add(image);
Stream source = File.OpenRead("C:\\Webpage.html"); //from another application
webBrowser.DocumentStream = source;
Thank you for your help in advance.
magicbasti
You can encode the image as base-64 and store it in the <img> tag itself. There's some information about it here.
I have an image folder in my project solution. I capture the image for a customer and i keep it in it. After i fill the details I redirect to another aspx page and i take the pic and come back to registration page and map the image to an image button i am using session variable to map the image path which is in the image folder. My problem is I get the same image even if i take a new pic. I am keeping jus one pic at a time in the image folder why do i get the previous image which is not in the image folder. Am i not supposed to get the new pic which i have taken? Please elaborate more on this and provide me a solution..I would be grateful to you..
There could be browser caching at play. One way to get around it is to add a random querystring param to the image url (a timestamp etc) to make the image url unique.
<img src="someImage.png?someParam=1234" />
You cannot delete browsers cache programmatically however below code will help you for disabling caching and clears existing cache from your application... Caching is your problem as you explained in question.
public static void DisablePageCaching()
{
//Used for disabling page caching
HttpContext.Current.Response.Cache.SetExpires(DateTime.UtcNow.AddDays(-1));
HttpContext.Current.Response.Cache.SetValidUntilExpires(false);
HttpContext.Current.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);
HttpContext.Current.Response.Cache.SetNoStore();
}
so I have image generated from table using html2canvas.
The output will be placed in canvas.
My problem is what to do when user click "Download Image" button so the image can be downloaded to their computer ?
I already google some way to do it but it all of it are not make sense. There is no code that show how to retrieve the data image and then download it to the computer.
there will be two ways to do this :
still use html2canvas to convert the table to image and then use jquery to download the image
use another solution to convert the table to image and then use c# (code behind) to download it
so which should I do ? or maybe you have any other solution ?
EDIT : I've already got the data url, but I can only send the image to new tab using window.open(image_data_url), not download it. But a minute ago I found the solution. You can just use "a" tag and then add attribute "download=[file_name.jpg]" and fill the "href" value with the data url. But still it's not what I want. If I use this I will need two buttons, button for converting table to image and button for download the image. Is there any possible solution with single click you got the data url and then download it as image ?
EDIT : the solution above can't be used in IE. So maybe there is another solution ?
You can use html2canvas to convert the html element, then save as image on your local using jQuery. Take a look at my sample code :
$("#btnSave").click(function() {
html2canvas($("#map"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
Canvas2Image.saveAsPNG(canvas);
$("#img-out").append(canvas);
// Clean up
//document.body.removeChild(canvas);
}
});
});
here's the real live : http://www.nanonimos.com/drag-pin-ID-convert/
Use toDataURL or toBlob on the canvas and link to the generated url.
When using toBlob you need to use URL.createObjectURL(blob) on it).
Im wondering what version of google you're using since when i google "canvas get image"
I get plenty results with ready to use codesnippets.
Like:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement#Example.3A_Getting_the_data-url_for_a_canvas
or
Can I get image from canvas element and use it in img src tag?
I was wondering how you, on WP8, can navigate to / open an image?
Suppose I just saved an image to my Save Pictures folder, I now want to navigate the user to that image so they can share it on facebook.
Lets say I have:
MediaLibrary lib = new MediaLibary();
Picture p = library.SavePicture("foo.jpg", imgStream);
How can I navigate to p as if the user had clicked it from the picture library?
A simple method for navigate into image is related to Efficient image manipulation in C#. I think that you need an framework for precessing like AForge.NET.
You could always try passing the url of the image as a string to a page that has nothing on it except an "Image". Then as soon as you navigate to the page you open up the image from the url(url can be for an isolatedstorage file) and set it as the "Image" on the page.
I am developing a C# web project. I run it on the local web server.
I draw. I show image as follows:
bitmap.Save(Server.MapPath("diagram.jpg"), ImageFormat.Jpeg);
Image1.ImageUrl = ResolveUrl("diagram.jpg");
I don't see new image. Only old one, which I had after changing image name
(Say, I change diagram.jpg to diagram2.jpg).
Browser is Firefox.
The design page in C# is simple. Just Image and few TextBoxes on the page.
No UpdatePanel and such.
Something with caching... But how to fight with that...
But how to fight with that.
Always use a separate path / name. Pug a GUID somewhere. Simple like that. Different file can not be cached.
I'm not sure what ResolveUrl does, but try adding a querystring to the image url so that the page always gets a "fresh" file. Something like this:
Image1.ImageUrl = ResolveUrl(string.Format("diagram.jpg?v={0}", Guid.NewGuid()));
You can alternative write the image file as
diagram.jpg?ver=2
to keep the same image file, but force the browser to update it.
If Image has Same name and URL browser picks the image from the cache and displays the same for faster loading of the pages.
Even if you change the image server side the same cached image is displayed until you clear the cache of the browser. You can use query string to change image url like below.
Image1.ImageUrl = ResolveUrl("diagram.jpg?" + DateTime.Now.Ticks.ToString());