Crop Image

G

Guest

Hi there,
I was wondering if there was a way to crop a peice of an ASP.Net Image,
allowing the user to zoom in on only a section of the picture??

any help would be appreciated!!
thanks
 
K

Kevin Spencer

Yes. You would have to manipulate the image on the server side. So, it would
be done by doing a PostBack, altering the image, and using an ASPX page to
return the cropped image to the browser.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Neither a follower nor a lender be.
 
G

Guest

Hi Kevin,
Thanks for the reply. Would you be able to provide any code samples of how
i could do this.. I'm still pretty new to ASP.Net and don't really know what
you're talking about..Just whatever the quickest/easiest way is to zoom in on
a cropped part of an image..

thanks so much!!
 
K

Kevin Spencer

Hi Adam,

I'm afraid you picked the wrong guy for code samples. I generally don't give
out code samples, except for small examples of syntax. I feel that I'm not
doing anyone any good by doing their work (writing their code) for them. It
doesn't make them a better prgrammer; it makes them a lazier programmer. I
do get some flack for it, but I have to obey my conscience in these matters.

I will tell you in more detail what you need to do, and hopefully you should
be able to take it from there:

The first thing we need to do is analyze the problem. This begins with
requirements. At this point, I would have to say that your requirements are
not well-defined. For example, the first thing you mention is:
I was wondering if there was a way to crop a peice of an ASP.Net Image

That's all well and good. We know what cropping is, but we have yet to
define the mechanism by which the user will instruct your app to crop the
image. Cropping is done in a number of different ways, depending upon the
app. Cropping is the process of reducing the horizontal and/or vertical
size, by eliminating pixels from one or more edges of the picture. So, when
cropping, one must determine how many pixels do we drop from which edges?

Now, we mentioned that there are many apps that crop images, and that they
do this in any number of ways. For example, in some apps, you click and drag
the cursor to define a rectangle inside the image. This rectangle's size and
location determine how much (if any) to trim from each edge of the image.
But we're talking about a browser here. Is it possible to draw a rectangle
over an image using HTML and JavaScript? Yes, but it's complicated.
Basically, you have a hidden Div on the page. When you click the mouse over
the image, the div is moved (via JavaScript) to the point where you click.
Initially, the Div is 1X1 pixel. As you drag, the div is resized so that the
width and height correspond to the difference between the XY of the upper
left-hand corner of the div to the mouse position. The div is positioned
above (Z-order) the image, and the edges become visible, so that you see the
outline of the rectangle. When you release the mouse, JavaScript records the
location and dimensions of the rectangle, relative to the image.

Once you have determined the amount to crop from each edge, you need to
transmit it to the server. This would be done via PostBack. Possibly, you
would populate 4 hidden form fields with the numbers of pixels to crop from
each edge. Once the PostBack occurs, you read the 4 hidden form fields to
determine how much to crop from each edge.

Now for the tricky part (oh, you thought THAT was the tricky part?). How do
we modify the image and return it to the Page? Well, an HTML document
doesn't actually contain images; it contains references to their URLs, so
that the browser can download and display them where they ought to be. So,
the first thing you need is an ASPX page that functions as an image. This is
done by creating an ASPX page that either creates or fetches an image, sets
the Response.ContentType to "image/jpg" (whatever the appropriate MIME type
is), and then saves the image to the Response.OutputStream. Now, this might
seem a bit confusing, as the page has an ASPX extension. But the browser
will ignore that if you set the MIME type.

The page which contains the image must point to this ASPX page to get the
image. One method of calling such an image page is to use QueryString
parameters in the URL. For example:

<img src="Image.aspx?image=someimage.jpg&left=10&right=10&top=20&bottom=25>

The page reads the QueryString and custom-delivers the image dynamically.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Neither a follower nor a lender be.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top