Integrate jquery. imgareaselect on the website to preview and select images locally.

ImgareaselectIt is a very useful jquery plug-in developed by Michal Wojciechowski and implements the image capturing function. Its documentation and demo are also very detailed. You can go to http://odyniec.net/projects/imgareaselect/to learn more.

Next we will start to useImgareaselectStart code.

The first is to reference jquery, and then reference the downloaded jquery. imgareaselect. Pack. js file and imgareaselect-default.css Style File.

Then write some element labels.

         <input type="hidden" name="x1" value="" />    <input type="hidden" name="y1" value="" />    <input type="hidden" name="x2" value="" />    <input type="hidden" name="y2" value="" />    <input id="loadFile" type="file" name="name" onchange="readURL(this);" />    <input type="submit" name="submit" value="Submit" />

This will be used to display images and record coordinate points of captured images.

Start writing JS

<SCRIPT type = "text/JavaScript"> // draw a small image function Preview (IMG, selection) {var scalex = 100/(selection. width | 1); var scaley = 100/(selection. height | 1); $ ('# ferret + div> img'detail .css ({width: math. round (scalex * 400) + 'px ', height: math. round (scaley * 300) + 'px ', marginleft:'-'+ math. round (scalex * selection. x1) + 'px ', margintop:'-'+ math. round (scaley * selection. y1) + 'px '}) ;}$ (do Cument ). ready (function () {// Add a thumbnail $ ('<div>  <div> '). CSS ({float: 'left', position: 'relative ', overflow: 'den den', width: '100px ', height: '100px '}). insertafter ($ ('# ferret'); // edit the main chart $ ('# ferret '). imgareaselect ({x1: 120, Y1: 90, X2: 280, Y2: 210, aspectratio: '4: 3', onselectchange: preview, onselectend: function (IMG, selection) {$ ('input [n Ame = "X1"] '). val (selection. x1); $ ('input [name = "Y1"] '). val (selection. y1); $ ('input [name = "X2"] '). val (selection. x2); $ ('input [name = "Y2"] '). val (selection. y2) ;}}) ;}); // preview function readurl (input) {var strsrc =$ ("# LoadFile") locally "). val (); // verify that the format of the uploaded file is correct var Pos = strsrc. lastindexof (". "); var lastname = strsrc. substring (Pos, strsrc. length); If (lastname. tolowercase ()! = ". Jpg ") {alert (" the file type you uploaded is "+ lastname +", and the image must be jpg "); Return false ;} // verify whether the size of the uploaded file exceeds the value if (input. files [0]. size/1024> 150) {alert ("the size of the file you uploaded exceeds the K limit! "); Return false;} If (input. files & input. files [0]) {var reader = new filereader (); reader. onload = function (e) {$ ('# ferret '). ATTR ('src', e.tar get. result); $ ('# ferret1 '). ATTR ('src', e.tar get. result) ;}; reader. readasdataurl (input. files [0]) ;}}</SCRIPT>

The above JS completes the local Preview (the preview here is normal in chrome; Some Problems in IE are not found in the local preview method, you can replace it remotely) and the screenshot function.

The front-end is finished, and then the back-end code is written.

Protected void page_load (Object sender, eventargs e) {If (ispostback) {int X1 = convert. toint32 (request ["X1"]); int Y1 = convert. toint32 (request ["Y1"]); int X2 = convert. toint32 (request ["X2"]); int y2 = convert. toint32 (request ["Y2"]); httpfilecollection files = request. files; For (INT I = 0; I <files. count; I ++) {httppostedfile file = files [I]; file. saveas (server. mappath ("upload/" + file. filename); // set the thumbnail int thumbnailwidth = 400; int thumbnailheight = 300; // create a new BMP image Bitmap bitmap = new Bitmap (thumbnailwidth, thumbnailheight ); // create a new drawing board graphic = graphics. fromimage (Bitmap); // set the graphic with high quality interpolation method. interpolationmode = interpolationmode. high; // set high quality, low speed rendering smoothness graphic. smoothingmode = smoothingmode. highquality; // clear the canvas and fill the graphic with a transparent background color. clear (system. drawing. color. transparent); // original image bitmap originalimage = new Bitmap (file. inputstream); // draw the specified graphic of the original image at the specified position and in the specified size. drawimage (originalimage, new system. drawing. rectangle (0, 0, thumbnailwidth, thumbnailheight), new system. drawing. rectangle (0, 0, originalimage. width, originalimage. height), system. drawing. graphicsunit. pixel); // obtain the thumbnail system. drawing. image thumbnailimage = system. drawing. image. fromhbitmap (bitmap. gethbitmap (); // create select image bitmap selectbitmap = new Bitmap (x2-x1, y2-y1); // create a new artboard graphics selectgraphic = graphics. fromimage (selectbitmap); // crops selectgraphic. drawimage (thumbnailimage, 0, 0, new rectangle (x1, Y1, x2-X1, Y2-Y1), graphicsunit. pixel); // save selectbitmap. save (server. mappath ("upload/" + guid. newguid () + file. filename), imageformat. JPEG); // todo: Release the above resources }}}

Here, we first scale down the image to the same proportion as the big image at the front-end, then intercept the image and save it to the file.