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?
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
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());
For a project I'm working I would like the user (admin) to be able to change the picture on the page he is currently on. I managed to upload the image to "the server" using interlink. This basicly uploads it to a given folder on a server, in my case being: Interlink/Uploads.
But now I don't really know how can I tell my website to replace the source of the image that is currently shown with the source of the uploaded image.
Another something I would like to do is create a simple image gallery with all the images in that folder, once again I don't know how to do this.
I hope somebody can help me, Thanks.
Thomas
Edit: Just so clarify, the application is written in silverlight (XAML, C#). I apologise for any inconvenience.
I take it that the "Silverlight" portion of this question is related only to Interlink (your file uploader), and not to the page itself, which I presume is straight HTML.
If that's the case, you've got several options for changing the local image. The simplest way is simply to wait until you know that your file upload has finished (presumably Interlink has some way of notifying you that this is the case), and then run something like this bit of JavaScript:
<script type='text/javascript'>
function changeImage(newImageSource) {
document.getElementById('myTargetImage').setAttribute('src', newImageSource);
}
</script>
As far as displaying a simple image gallery with all the images in the folder, my recommendation would be to look into one of the numerous jquery plugins that handle this sort of thing, e.g.:
http://www.1stwebdesigner.com/css/fresh-jquery-image-gallery-display-solutions/
EDIT: Silverlight Options
You basically have the same options, except you're doing them in C# instead of JavaScript. For instance, when Interlink tells you that the new image has been uploaded, run this:
string imageName = "something.jpeg";
var ub = new UriBuilder(HtmlPage.Document.DocumentUri);
ub.Path = "/Interlink/Uploads/" + imageName;
img.Source = new BitmapImage(ub.Uri);
And for an image carousel, something like this:
http://3dimagecarousel.codeplex.com/
You'll just need to provide the URL's of all the images. The easiest way to do that is probably to expose a web service method that lists them all.
Hi there
I am working with visual web developer and would a) like to know how I could programatcally add a picture to the website, instead of going to Website and then add existing item. The idea I have is to upload the picture using the file upload control but then I want to have it added so that it can be accessed using a gridview.
b)I would also like to know how to size the picture using C# code obviously so that is displayed at the correct size.
best regards
arian
here is a full project with source code to manipulate images, including resize.
http://www.codeproject.com/KB/web-image/ASPImaging1.aspx
And a sample code only for resize
http://weblogs.asp.net/gunnarpeipman/archive/2009/04/02/resizing-images-without-loss-of-quality.aspx
You can use GetThumbnailImage to easily create a smaller verson of the uploaded image. The code looks something like (it's free typed without a compiler, so there may be some errors):
System.Drawing.Image pic = new System.Drawing.Bitmap(sourceFilename);
System.Drawing.Image thumb = pic.GetThumbnailImage(targetXSize,targetYSize,
new System.Drawing.Image.GetThumbnailImageAbort(this.GetThumbnailImageAbort),
IntPtr.Zero);
thumb.Save(thumbPathName);
I believe the Image implements IDisposable, so you need to remember to Dispose of them when you're done.
The abort parameter can be a function that simply does this (can't remember off the top of my head when it gets called):
bool GetThumbnailImageAbort() {
return false;
}