Today, we will go to ASP. NET using jQuery. the Jcrop plug-in allows you to select images. If you want to select which part of the beauty you have the right to decide, I can't care about it. In general, the principle is very simple. The general process is as follows: load the source image on the browser --> use a rectangular box to select a region on the source image and send the selected vertex coordinates and rectangular size to the server --> use the image cutting algorithm on the server side to cut the source image and output the cut image. Next we will discuss and analyze these steps in detail, and attach a demo at the end for your reference.
1. Load the source image on the page
I don't need to talk about this. I just need to display an image on the page and use an img tag. But I need to paste the code for the next demonstration.
2. Use a rectangular box to select an area on the source Image
We will use a jQuery plug-in Jcrop. Thanks to Jcrop. The project page address is http://deepliquid.com/content/jcrop.html. thank you again. The next step is to use this plug-in to enable us to cut images on the source image at will. First, place several hidden fields on the page to store the currently selected vertex coordinates and the size of the selected rectangle, and then put a Save button, click Save to save the cut image on the server. The Code is as follows:
The Code is as follows:
The four hidden fields represent the x: x coordinate of the top left vertex, y: y coordinate of the top left vertex, w: select the width of the rectangle, and h: select the length of the rectangle.
Then we call the plug-in to perform initialization and introduce js and css files:
The Code is as follows:
