How to write on an image in my web application - c#

I load an image in my web application using the following code :
Bitmap oCanvas = (Bitmap)Bitmap.FromFile(Server.MapPath("Images\\2.jpg"));
Graphics g = Graphics.FromImage(oCanvas);
Response.ContentType = "image/jpeg";
oCanvas.Save(Response.OutputStream, ImageFormat.Jpeg);
Response.End();
g.Dispose();
oCanvas.Dispose();
Now how to write on this image by mouse and save the result as an image ?

In order to let the end user write on the image using his mouse, you need a client-side ActiveX control on your page. That will only work on Windows PCs and it can get pretty complicated quickly.
Another option would be to host the image in a Flash application, which could run on all platforms (except iOS :-) You can find an example of that here: http://active.tutsplus.com/tutorials/games/create-a-basic-drawing-application-in-flash/
And yet a third option would be to use an HTML5 Canvas + client-side JavaScript. Not all browsers support the HTML5 (pre-)standard yet. A good example you can find here: http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/#demo-complete, and another one here: http://www.codicode.com/art/how_to_draw_on_a_html5_canvas_with_a_mouse.aspx
Good luck!

Related

Simple Javascript image editor for ASP.Net application

I'm doing a project on ASP.Net, whose task is to work with images.
So, I need to make the client part of whose tasks will include:
cropping, rotating, resizing.
I saw this topic, but solution are too complicated for my problem (I have only 3 functions, not online version of Photoshop).
Could you give me a free solution for JS?
means that the sending result-image will be executed in Ajax.
Desirable,that solution should support Ie8+.
It is not free, but Telerik has an Image Editor
for ASP.NET AJAX.
Full disclosure: I'm the author of StudioJS
StudioJS (MIT-licensed), (see demo) offers cropping, rotation, flipping, saturation, contrast, brightness adjustment, white-balance correction, and a number of image effects.
It uses ImageResizer (of which I am also the author), to do the back-end work. The ImageResizer core, resizing, cropping, and rotation is free, but the image effects and adjustments require a license. Everything is on GitHub.
If you build your own solution, check out my list of avoidable pitfalls. It can be a bit tricky.
You can use a JavaScript free component to edit the image and convert it to base64 , then it will be ease to save this base64 as a server side code to physical file image
Javascript code :
http://cssdeck.com/labs/xnmcokhc
or by the same way there are many other JS options too in below link
http://www.jqueryrain.com/demo/jquery-crop-image-plugin/
You could use an online editor such as Pixlr. I read it has an API so that you can set it up to work with your web application.It has the features you want, and also many more.
To have your own JS editor, I haven't found something ready available online but could make one of your own.
You could use the imgAreaSelect plugin (is used in WordPress) to make the client side part of the crop function. For the server side part, I have written this article some time ago to describe how a crop function works. You could adjust it to work with the imgAreaSelect plugin. If Pixlr doesn't suit you, let me know so that we can talk more about the second scenario.
So, I've created a SimpleImageEditor for my Project.
I've used ImageAreaSelect for cropping and fc-ImageResizer for resizing.
For display I use Bootstrap 3.0.
https://bitbucket.org/Dr-klo/simpleimageeditor/

Instagram Filter Image Manipulation asp.net

I've found this. However it is for php, does an equivalent library exist for asp.net?
Is there anything similar to this for ASP.net that mimics the kind of filters you'll find on instagram?
I've recently found AForge.net which amongst many things will do image processing and has a select amount of basic filters I believe will be able to achieve what I need it for. The docs on there site are also really good.
To apply a Sepia filter to an image:
Bitmap bmp = new Bitmap(pathToImage);
Sepia filter = new Sepia();
filter.ApplyInPlace(bmp);

Image processing library in asp.net (using C#) without flash

I have the following requirement wherein I have to implement a paint brush kind of feature in a asp.net web application. Basically it should support resizing, drawing lines, squares, etc and a whole lot of features like a paint brush. I was googling out image processing libraries in internet.
I found some - but the problem is most of them is with flash. I was looking for some option without flash since the application should run on a ipad also.
Can you people suggest some good image processing libraries which I can use in my asp.net (using C#) application.?
I have done good enough research regarding them. I do not have much time to download the trial versions and try each and every library. So I need the help of you all to suggest me something based on experience.
For the Image Resizing and cropping you can use Image Resizer and for drawing lines, squares, etc you should use HTML5 Canvus.
There are a lot of good libraries and tutorials for HTML5 Canvus.
Its easy to use and is available at Nuget.
var settings = new ResizeSettings {
MaxWidth = thumbnailSize,
MaxHeight = thumbnailSize,
Format = "jpg"
};
settings.Add("quality", quality.ToString());
ImageBuilder.Current.Build(inStream, outStream, settings);
resized = outStream.ToArray();
You can install it using Nuget
PM> Install-Package ImageResizer
you can use AForge.NET, a C# framework, here is code project link :
http://www.codeproject.com/Articles/16859/AForge-NET-open-source-framework

webservice to interact with image file

I'm making a iOS game which will pick a random clue(text) and image (clue and image come in a set, 1 row) from the clue repository in the database. I have a web service with webMethods and functions that allow me to pull the database row out. (tested for clue) I've been searching on Google for articles on how to import image to iOS from db but to no avail.
how to import image from DB by web service (build using c#)? Can anyone please guide me in the right direction? I would like it to be stored in mutableArray so that after the player are done playing, the clue and image will be wipe off the temp array. (i don't want to put the image in the app as that will make the app very large and that user are able to upload their own clues and image, so live feed from database is the ideal method.
Right now I'm stuck on the web service side on importing the image over. I'm currently using List to store the clue, but have no idea on what to use to store image. I am thinking of using ArrayList which store object, but have no idea how to convert it to image at the iOS side. And as I mentioned above, I can't seem to find any tutorial or example that import image to iOS app via web service. (or am I using the wrong search term)
Will be helpful if any1 can help me out, or give alternate solution which enable live update of image and clues.
EDIT - I found ImageList() and List. which one should I be using now?
Also found out to make image file is just -> image testfile;
EDIT2 - problem I'm facing
-dealing with image file (image? imagelist?
-when drawing datarow from DB in webservice, how do i deal with the image file. (guessing ImageList or List<image> (after some luck on research)
-assuming 2nd point works fine, i should be able to solve the client side
(sorry, noobie at webservice, )
.
what I have
-webservice that draw datarow from database for clue(string) (tested and working fine with my function)
-iOS client side with RESTful architecture
.
what I need
-webservice that draw datarow from database for picture(image (format not so important yet)) (code should be similar to drawing clue, only which function to store it in. (using List<string> for clues)
Sounds like you might be getting a bit ahead of yourself. Try solving just one problem at a time; you'll make much more progress.
First, do you know how to download an image to your iOS application? Try downloading a very simple publicly available image like a Google doodle: https://www.google.com/logos/2012/gymnastics-2012-hp.jpg. Whatever IOS application toolkit you're using should have a walkthrough for how to download an image and present it via HTTP.
Second, do you know how to host an image file on your web server? Try downloading a random JPG or PNG image yourself and hosting it on your server as a static file. Then point your IOS application at that static file and download it just like you did with the Google doodle.
If both of those steps work, you can then begin to host dynamic images on your server. Create a page (if you're using ASP.NET) or a controller path (if you're using MVC) and have your C# code use Response.TransmitFile to upload an image to the clickstream. Again, download that image to your IOS application to verify it worked.
Finally, modify your server application to take a parameter - either by a querystring (example: myhost.com/mypage.aspx?image_id=1) or by an MVC path (example: myhost.com/images/1). Use that ID number to retrieve the image information from your database. Then transmit the image to the client. If all goes well, you should then be able to retrieve this image in your IOS app.
I hope this helps you get closer to your project!
I have no experience programming on iOS, but I think that the easiest way is to prepare RESTful api for that. With the REST guidelines in mind, what you end up with is a webservice that defines a resource, and your client needs only to request a particular file (I assume that client somehow knows what the id/name of the image is). This has one big advantage - it is very easy to develop (on any platform) - server side.
When it comes to client side:
1. Use WebRequest object to create a http get request
2. Wait for the data to be downloaded (you may use background worker or just another thread, so that your app is not blocked)
3. When request is complete and you get the response object - read what was sent. It is going to be binary image.
4. Use the binary data (image) and display it in your app.
A sample of how to use WebRequest object is provided by me in different SO thread: https://stackoverflow.com/a/11891240/165751
Note: I assume you know how to retrieve the image from the DB (or any kind of store actually) on your server side so that your webservices can read it and return it as a webresponse.
There are plenty of possibilities when it comes to server side technology, but if you want to stay with .Net technology stack - I suggest to have a look at WCF REST Service Template 40(CS) - I've been using it in the past (and my service was returning images as well :) and I was very happy with it.

c# browse for a image on web applications and display it

What would be the best way to create a C# Web Application that allows the user to browse for an image and then display it?
An equivalent of Picturebox in windows applications, sort of
Ideally the user should be able to click on Browse, choose the picture and see it in the browser itself
Thanks
There are all ready some image-browser for asp.net including source code.
Some of them
http://www.codeproject.com/Articles/17605/Thumbnail-Image-Viewer-Control-for-ASP-NET-2-0
http://www.codeproject.com/Articles/29846/A-simple-ASP-NET-AJAX-image-browser
For this, the user needs to choose an image which will be uploaded to the server, and then rendered in the HTML or recovered using AJAX. The problem is that you can't get rid of the send/receive, and it can get slow.
You can use a FileUpload or any other component that allows to upload files directly or via AJAX (look at AjaxFileUpload AjaxControlToolkit for this).
Then you need to add an <img> to your page, through a full postback or using any other means (like jQuery.Ajax).

Categories