Screenshot upload function Imageareaselect

Front desk:

<meta name= "viewport" content= "Width=device-width"/>
<title>img3</title>
<script src= "~/scripts/jquery-2.1.4.min.js" ></script>
<link href= "~/scripts/myjslibrary/css/imgareaselect-default.css" rel= "stylesheet"/>
<script src= "~/scripts/myjslibrary/jquery.imgareaselect.min.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$ (document). Ready (function () {
$ (' Img#imgselect '). Imgareaselect ({
SelectionColor: ' Blue ',
X1:20,Y1:10,X2:120,Y2:110,
MAXWIDTH:100,MAXHEITHT:100,
MINWIDTH:100,MINHEIGHT:100,
selectionopacity:0.1,
Handles:true,
Aspectratio: ' 1:1 ',
Onselectend:preview
});
$ (' #button1 '). Click (function () {
if (Checkimgtype ($ (' #imgFile ') [0])) {
$ (this). Parent (). submit ();
}
});
$ (' #button2 '). Click (function () {
Alert (this). Parent (). submit ());
});
})
function GetValue (selection) {
$ (' input[name=x1] '). Val (selection.x1);
$ (' input[name=y1] '). Val (selection.y1);
$ (' input[name=width] '). Val (math.round (selection.width | | 1) * 300));
$ (' input[name=height] '). Val (math.round (selection.height | | 1) * 300));
}
Function Preview (IMG, selection) {
if (Selection.width > 49) {
GetValue (selection);
var defultwidth = $ ("Img#imgselect"). width ();
var defultheight = $ ("Img#imgselect"). Height ();
Console.info ("width:" + defultwidth + "Height:" + defultheight);
var ScaleX = $/(Selection.width | | 1);
var ScaleY = $/(Selection.height | | 1);//200px box
var scaleX1 = +/(Selection.width | | 1);
var scaleY1 = +/(Selection.height | | 1);//100px box
Get the default width,height for uploading pictures
$ (' #preview200 '). CSS ({
Width:Math.round (ScaleX * defultwidth) + ' px ',//first reduce the size of the desired box, such as the size of 200
Height:Math.round (ScaleY * defultheight) + ' px ',//and then enlarge the image size in the picture.
MarginLeft: '-' + math.round (ScaleX * selection.x1) + ' px ',
MarginTop: '-' + math.round (ScaleY * selection.y1) + ' px '
});
$ (' #preview100 '). CSS ({
Width:Math.round (scaleX1 * defultwidth) + ' px ',
Height:Math.round (scaleY1 * defultheight) + ' px ',
MarginLeft: '-' + math.round (scaleX1 * selection.x1) + ' px ',
MarginTop: '-' + math.round (scaleY1 * selection.y1) + ' px '
});
$ ("#x1"). Val (Math.Round (selection.x1));
$ ("#x2"). Val (Math.Round (selection.x2-selection.x1));//intercept width
$ ("#y1"). Val (Math.Round (selection.y1));
$ ("#y2"). Val (Math.Round (selection.y2-selection.y1));//intercept height
}
}

/** Check image upload type */
function Checkimgtype (obj) {
var imgfile = ';
Get the full path of a picture
var imgfilepath = Getimgfullpath (obj);
var endIndex = imgfilepath.lastindexof (' \ \ ');
var lastIndex = imgfilepath.length-endindex-1;
if (endIndex! =-1)
imgfile= imgfilepath.substr (Endindex+1,lastindex);
Else
Imgfile = Imgfilepath;
var tag = true;
EndIndex = Imgfilepath.lastindexof ('. ');
if (EndIndex = =-1)
Tag = false;
var imgname = imgfilepath.substr (Endindex+1,lastindex);
Imgname = Imgname.touppercase ();
if (imgname! = ' GIF ' && imgname! = ' JPG ' && imgname! = ' PNG ' && imgname! = ' BMP ') {
Tag=false;
}
if (!tag) {
Alert (' The file type of the uploaded image must be: *.gif,*.jpg,*.png,*.bmp, please re-select! ')
Alert (' You Tease Me ');
Upload.clear (obj);
return false;
}
return true;
}
function Getimgfullpath (obj) {
if (obj) {
Ie
if (window.navigator.userAgent.indexOf (' MSIE ') >= 1) {
Obj.select ();
Return Document.selection.createRange (). text;
}
Firefox
else if (window.navigator.userAgent.indexOf (' Firefox ') >= 1) {
if (obj.files) {
Return Obj.files.item (0). Getasdataurl ();
}
return obj.value;
}
return obj.value;
}
}
});

</script>
<style type= ' text/css ' >
#container
{
Position:absolute;
left:40px;
Background: #FFF;
border: #666 2px solid;
border-radius:10px;
width:600px;
height:500px;
padding:20px;
}

#selectdiv
{
width:350px;
height:550px;
Float:left;
}

#uploaddiv
{
margin-top:20px;
Border-top: #CCC 1px solid;
}

#prediv200
{
height:200px;
width:200px;
Overflow:hidden;
border: #CCC 3px dashed;
}

#prediv100
{
height:100px;
width:100px;
Overflow:hidden;
border: #CCC 3px dashed;
}

#preview
{
position:relative;
Overflow:hidden;
}

[Type=button]
{
width:50px;
}
</style>
<body>
<div>
<div id= ' container ' >

<div id= ' Selectdiv ' >

<div>
<p> image upload: <font color= ' Red ' >*.gif,*.jpg,*.png,*.bmp</font></p>
@using (Html.BeginForm ("Img3handler", "uploadimg", FormMethod.Post, new {area= "TestFunction"}))
{
<input type= ' file ' name= ' imgfile ' id= ' imgfile ' ><br/>
<br/>
<input type= ' text ' name= ' x1 ' id= ' x1 ' value= ' 0 '/>
<input type= ' text ' name= ' y1 ' id= ' y1 ' value= ' 0 '/>
<input type= ' text ' name= ' x2 ' id= ' x2 ' value= ' 0 '/>
<input type= ' text ' name= ' y2 ' id= "y2" value= ' 0 '/><br/>
<input type= "text" name= "src" id= "src" value= "~/content/uploadimg/fdsfsdfsdfsd.jpg"/>
<input type= "Submit" value= ' upload ' id= ' upload '/>
}
</div>
</div>
<div id= ' prediv200 ' >

</div>
<div id= ' prediv100 ' >

</div>
<div>
<form>
@* <input type= ' hidden ' name= ' x1 ' value= ' 0 '/>
<input type= ' hidden ' name= ' y1 ' value= ' 0 '/>
<input type= ' hidden ' name= ' width ' value= '/> '
<input type= ' hidden ' name= ' height ' value= ' '/> '
<br/>
&LT;BR/>*@
<input type= ' button ' value= ' Modify ' id= ' Button2 '/>
</form>
</div>
@if (viewdata["Success"]! = NULL)
{
<script type= "Text/javascript" >
$ (function () {
$ (". Success"). Slidedown ();
$ ("#ok"). Slideup ();
});
</script>
<div style= "display:none;position:absolute;top:200px;left:200px;z-index:1000;" class= "Success" >
Upload successful
<input type= "button" id= "OK" value= "OK"/>
</div>
}
Else
{
<span> Upload failed </span>
}
</div>
</div>
</body>

Background:

Public ActionResult Img3handler (formcollection forms)
{
int x1 = Convert.ToInt32 (forms["x1"]);
int y1 = Convert.ToInt32 (forms["Y1"]);
int x2 = Convert.ToInt32 (forms["X2"]);//Actually, it's useless.
int y2 = Convert.ToInt32 (forms["y2"]);//Actually, it's useless.
string src = forms["src"];
String path = HttpContext.Server.MapPath (src);//actual path
Create images to save future captured images
Bitmap image = new Bitmap (Path);
Graphics imggraphics = graphics.fromimage (image);
Setting the screenshot area
Imggraphics.copyfromscreen (x1, y1, x2, y2, new Size (100, 100));
Save
SaveImage (image);
string[] FileName = src. Split ('. ');
string file = Filename[0]+filename[1] + "Caijinhao." + filename[2];
string folders = HttpContext.Server.MapPath ("~/content/uploadimg/");
Image. Save (folders+ "Caijinhao3." +FILENAME[1]);
String Newpath= cutimage (Path, x1, y1, x2, y2, Guid.NewGuid (). ToString ("N"), folders,filename[1]);
viewdata["Success"] = "true";
Return View ("IMG3");
}
<summary>
How to capture pictures
</summary>
<param name= "url" > Image address </param>
<param name= "BeginX" > Start position-x</param>
<param name= "BeginY" > Start position-y</param>
<param name= "GetX" > Clipping width </param>
<param name= "GetY" > Intercept length </param>
<param name= "FileName" > File name </param>
<param name= "Savepath" > Save path </param>
<param name= "fileext" > Suffix name </param>
public string cutimage (string url, int beginx, int beginy, int getX, int getY, string fileName, String Savepath, String fi Leext)
{
if ((BeginX < GetX) && (BeginY < GetY))
//{
Bitmap Bitmap = new Bitmap (URL);//Original
if ((BeginX + GetX) <= bitmap. Width) && ((BeginY + GetY) <= bitmap. Height))
//{
Bitmap Destbitmap = new Bitmap (GetX, GetY);//target graph Create new diagram size
Bitmap Destbitmap = new Bitmap (100, 100);//The size of the image to be stored
Rectangle destrect = new Rectangle (0, 0, GetX, GetY);//I want to draw at the beginning of the new diagram
Rectangle srcrect = new Rectangle (BeginX, BeginY, GetX, GetY);//I'm going to copy it in this position of the original.
Graphics imggraphics = Graphics.fromimage (Destbitmap);
Imggraphics.drawimage (Bitmap, Destrect, Srcrect, GraphicsUnit.Pixel);
imageformat format = imageformat.png;
Switch (Fileext.tolower ())
{
Case "PNG": Format = imageformat.png; Break
Case "BMP": Format = imageformat.bmp; Break
Case "GIF": format = imageformat.gif; Break
}
Destbitmap.save (Savepath + "//" + filename+ "." +fileext,format);
return Savepath + "\" + "*" + filename.split ('. ') [0] + "." + Fileext;
//}
Else
{return "intercept range beyond the image range";}
//}
Else
{return "Please confirm (BeginX < GetX) && (BeginY < GetY)";}
}

Upload function Imageareaselect