0

I would like for a visitor to my website to be able to perform the following steps:

  1. Enter text in a few fields in a form and upload an image. (This is trivial.)
  2. Then see a preview of what the input would look like as an image, with the text input overlaying the uploaded image
  3. Save the image that was previewed to the server when the user submits the form.

I would like to do this using C# and ASP.NET. I've read that there are PHP options, but I would like to avoid mixing PHP and C# code.

I found this post: Convert webpage to image from ASP.NET, but that solution is for a desktop application.

I also found this post: Capture screenshot of active window?, but I don't want to have to hope that the user has their window sized correctly.

Step 1 is straightforward. I know how to do it, but I included it to be clear about what I am trying to accomplish.

user1132959's answer below helped me perform steps 2 and 3. I edited this post in response to it being put on hold. I hope this post can help someone else.

Community
  • 1
  • 1
dominicgray
  • 15
  • 6
  • Are you sure you understand what it is you're after? The linked questions are completely different requirements than what you've described here. – Simon Whitehead Aug 13 '13 at 04:55
  • I'm looking for a way to dynamically generate an image in the browser based on what the user uploads. I've thought of it a lot of different ways and I've done a lot of research. Those links are just examples of things I've tried. – dominicgray Aug 13 '13 at 05:03
  • Hmm, I am not sure about the implementation for the server-side but this definitely possible on the client-side with the html5 canvas API. See this example: http://stackoverflow.com/questions/6825262/best-way-to-convert-a-div-to-image-using-either-php-javascript-or-jquery – GoofyBall Aug 13 '13 at 05:14
  • 1
    What part of this do you need help with? Generating bitmap with text? Uploading image? Or everything overall? – user1132959 Aug 13 '13 at 17:40
  • @GoofBall Thank you for your response. I will give the html5 canvas a try. – dominicgray Aug 13 '13 at 21:21
  • @user1132959 Thank you for your response also. I need the most help with generating the image. Help with showing a preview (I'm thinking lightbox) and saving the generated image would be appreciated also. – dominicgray Aug 13 '13 at 21:24

2 Answers2

1

Here is a link to showing you how to draw text on the image. You can use the Bitmap class in that example in ASP .NET(although documentation says GDI isn't guaranteed, but this has never been a problem in my experience).

Once you created that bitmap object and added the text, store it somewhere or pass through the session, then create a page that will be dedicated to loading the bitmap for the user to see(user will actually be sent to page with buttons and link to this image page) and put something like this in the Page_Load event(assuming jpeg output format):

            System.Drawing.Image bm = theBitmapYouGeneratedEarlier;
            if (bm == null)
            {
                Response.Write("Failed to load image");
                return;
            }

            Response.Clear();
            Response.ClearHeaders();

            Response.ContentType = "image/jpeg";
            bm.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);
            Response.OutputStream.Flush();
            bm.Dispose();

Then lastly when the user clicks submit or whatever just save this new bitmap.

Community
  • 1
  • 1
user1132959
  • 978
  • 8
  • 16
  • Thank you so much. I got this to work. I would upvote this answer, but my reputation is not high enough yet. I hope other users upvote it. – dominicgray Aug 14 '13 at 02:59
0

You can use AjaxControlToolkit for instantly preview your uploaded photos. See example Here. And this tutorial tell you how to install AjaxContolToolkit in your project

Litash
  • 182
  • 1
  • 10