Hello so I have an interesting question for everyone. I have a WPF application that generates an html preview of a report based on Database data and user input. My currently dilemma is that I have a HTML canvas that is created by C# as follows:
Canvas myCanvas = new Canvas();
myCanvas.Name = "cvsMyCanvas";
myCanvas.width = userDefinedByTtextBox;
myCanvas.height = userDefinedByTtextBox;
myCanvas.Visibility = Visibility.Collapsed //Don't show the canvas just yet
My question is how do I get an image that I have saved locally to the computer on the canvas in a specific position. (i.e. A HTML Image tag object that is generated by C# and use the move to functionality)
(This is a rough example of how I think it should work but this is what I need the help on)
Example:
string htmlImage = "<img id=\"myImage\" src=\"C:\\Temp\\img.png\">";
htmlImage.moveTo(x,y);
...again the above code is an example of what it is I am trying to do. If anyone could help me out that would be great! Also if I did not provide enough information please let me know and I will let provide it.
There seems to be some confusion on what it is I am trying to do, it is most likely my fault do to lack of explanation so allow me to elaborate more. I have images saved in a folder in my temp directory I. I am running a WPF application that has a WebBrowser control that I am using to display HTML. The HTML that is used in that WebBrowser is created in the C# code behind. I am trying to create a canvas that is displayed in the WebBrowser with the images that I have saved in my temp folder. The code I have provided above apparently will not work for what I am trying to accomplish because there is no way to create a canvas in C# and use it in HTML. Let me know if this helps shed some light on this predicament or if even more explanation is required.
If you want to generate HTML5 code from your C#, the HTML code to generate should look like that:
context = canvas.getContext('2d');
var image = new Image();
image.src = <your path>;
image.onload = function() {
context.drawImage(image, x, y, w, y);
}
Then, just store it in the String or StringBuilder
Related
I am trying to make T-shirt design website. User customize its t-shirt by putting diffrent div and image over t-shirt div which has t-shirt in background using jquery now after final customization I want to save the picture of t-shirt/div so I can save customization.
How can i save customization div into image?
You can use the html2canvas library that can render to "canvas" your div and then make it image send it back to you.
You can get the code, and see examples here.
http://html2canvas.hertzen.com/
Here is the conversion from canvas to image for get it back:
http://www.nihilogic.dk/labs/canvas2image/
My Concerns.
What if a javascript error appears and the user lose whats make of ?
What if user not use a new modern browser that can handle the "canvas" so that can render to image whats inside the div.
The other way is to use flash and some programming on flash.
Ideally, you'll want to use server side processing to generate your images- rather than a DOM-based approached. You may want to consider using GDI+. Something along these lines should get you started (assuming the context of an ASP.NET page):
tshirt.aspx
var imagePath1 = #"C:\path\to\tshirt.jpg";
var imagePath2 = #"C:\path\to\graphic.jpg";
var bg = new Bitmap(imagePath1);
var overlay = new Bitmap(imagePath2);
var gfx = Graphics.FromImage(bg);
gfx.DrawImage(overlay, new Point(50, 50));
Response.ContentType="image/jpeg"
bg.Save(Response.OutputStream, ImageFormat.Jpeg);
Then on the page where the image is needed:
<img src="tshirt.aspx" />
Using the same code above for "tshirt.aspx", you can replace the call to bg.Save(Stream, ImageFormat) with bg.Save(filePath, ImageFormat) to write the generated image to disk.
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.
Another noob question from me... Apologies!
My initial code would be as follows (this is simplified):
Image pic = new Image();
pic.ImageUrl = "~/Images/photo.jpg";
pic.BorderColor = "Black";
How can I assign the 'pic' Image object to an Image Control already on my ASP.NET page?
The following doesn't work but illustrates what I'm trying to do:
MyImageControl = pic;
I'm sure there must be an easier solution than:
MyImageControl.ImageUrl = pic.ImageUrl;
MyImageControl.BorderColor = pic.BorderColor;
If you want to dynamically put controls on the page you need to do just that. Have a container then add them to the container. If you have some sort of list or array that you are storing the controls in, you just need to iterate through the collection, setting any properties you need and call container.controls.add(control); You will have to do this every post-back as their state will not be kept.
Using an asp:Panel as your container where you want the controls to show up is the easiest way to style and position the controls.
SOLUTION (moved from original post) :
I have come up with something which works for me but would still be interested if there is a way to do what I've asked above - My solution is as follows.... Rather than having a blank Image Control in my .aspx page, I changed it for a PlaceHolder instead. Then, in the C# code, I can use the following to include my Image on the page:
MyPlaceHolder.Controls.Add(pic);
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;
}
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.