Jquery. imgareaselect enables local preview and selection of captured images.

This article introduces jquery. imgareaselect's local image preview and selection of screenshot implementation code. If you need it, refer to it.

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.

The Code is as follows:

Copy code

Style = "float: left; margin-right: 10px; width: 400px; height: 300px"/> <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

The Code is as follows:

Copy code

<Script type = "text/javascript"> // Draw a thumbnail Function preview (img, selection ){ Var scaleX = 100/(selection. width | 1 ); Var scale= 100/(selection. height | 1 ); $ ('# Ferret + div> img'hangzhou.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' }); } $ (Document). ready (function (){ // Add a thumbnail $ ('<Div> <div> ') . Css ({ Float: 'left ', Position: 'relative ', Overflow: 'ddy ', Width: '100px ', Height: '100px' }) . InsertAfter ($ ('# ferret ')); // Edit the Master Chart $ ('# Ferret '). imgAreaSelect ({x1: 120, y1: 90, x2: 280, y2: 210, aspectRatio: '4: 3', onSelectChange: preview, onSelectEnd: function (img, selection ){ $ ('Input [name = "x1"] '). val (selection. x1 ); $ ('Input [name = "y1"] '). val (selection. y1 ); $ ('Input [name = "x2"] '). val (selection. x2 ); $ ('Input [name = "y2"] '). val (selection. y2 ); } }); }); // Local Preview Function readURL (input ){ Var strSrc = $ ("# loadFile"). 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 has exceeded If (input. files [0]. size/1024> 150 ){ Alert ("the size of the file you uploaded exceeds the limit of KB! "); 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.

The Code is as follows:

Copy code

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 bmp Image Bitmap bitmap = new Bitmap (Thumbnailwidth, Thumbnailheight ); // Create a canvas Graphics graphic = Graphics. FromImage (bitmap ); // Set a high quality Interpolation Method Graphic. InterpolationMode = InterpolationMode. High; // Set high quality and smooth Low Speed Graphic. SmoothingMode = SmoothingMode. HighQuality; // Clear the canvas and fill it with a transparent background color Graphic. Clear (System. Drawing. Color. Transparent ); // Original Image Bitmap originalImage = new Bitmap (file. InputStream ); // Draw the specified part of the original image at the specified position and in the specified size Graphic. 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 a selected Image Bitmap selectbitmap = new Bitmap (x2-x1, y2-y1 ); // Create a canvas Graphics selectgraphic = Graphics. FromImage (selectbitmap ); // Cropping 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.