jquery实现截取pc图片_jquery 上传图片自由截取

为了使用户能自定义个人头像，需要提供一个对上传图片的截图功能，当前很多网站特别是SNS类网站都提供这样的功能，非常实用。本文主要是利用jQuery的imgAreaSelect插件实现。

首先引入三个文件：

前段主要代码：初始化所选择截取的图片

$('#photo').imgAreaSelect({

aspectRatio: '1:1',

handles: true

, fadeSpeed: 200

, onSelectChange: preview

// , onSelectEnd: someFunction

});

设置所选区域大小值，与坐标：

function preview(img, selection) {

if (!selection.width || !selection.height)

return;

var scaleX = 100 / selection.width;

var scaleY = 100 / selection.height;

$('#left').val(selection.x1);

$('#top').val(selection.y1);

$('#w').val(selection.width);

$('#h').val(selection.height);

}

实现代码：前台

//上传图片

$("#File1").change(function () {

$("#formSave").ajaxSubmit({

type: "POST",

url: "/Home/UpPic/",

dataType: "json",

success: function (data) {

if (data.msg == "OK") {

$("#photo").attr("src", data.path)

} else {

alert(data.msg);

}

}

});

});

//剪切后保存头像

$("#btnSaveImg").click(function () {

if ($('#left').val() == "") {

alert("请先截取图片");

return;

}

$("#formSave").ajaxSubmit({

type: "POST",

url: "/Home/SavePic/",

dataType: "json",

success: function (data) {

if (data.msg == "OK") {

$("#photo").attr("src", data.path)

alert("保存成功！");

} else {

alert(data.msg);

}

}

});

});

实现代码后台：

///

/// 上传图片

///

public void UpPic()

{

try

{

var file = Request.Files["File1"];

if (file.ContentLength == 0)

{

ReWrite("Error","请选择文件");

return;

}

if (file.ContentLength > 307200)

{

ReWrite("Error","文件过大");

return;

}

int width = 0; int height = 0;

using (Image originalImg = Image.FromFile(file.FileName))

{

double bi = originalImg.Width / originalImg.Height;

if (bi > 1.6)

{

width = 600;

height = (int)(600 / bi);

}

else

{

height = 360;

width = (int)(360 * bi);

}

}

//w600 h360;

string extensionName = System.IO.Path.GetExtension(file.FileName).ToLower();

string fileName ="temp" + extensionName;

string p = "/Images/" + fileName;

string path = Server.MapPath("~" + p);

// file.SaveAs(path);

Session["path"] = "~" + p;

CommonMethod.AutoMakeThumNail(file.FileName, path, width, height, PicThumNailModel.H);

ReWrite("OK", p);

}

catch (Exception ex)

{

ReWrite("Error",ex.Message);

return;

}

}

public void SavePic()

{

string photo ="";

if (Session["path"] != null)

{

photo = Session["path"].ToString();

}

else

{

photo = "~/Images/20140430172226.png";

}

photo = Server.MapPath(photo);

using (Image originalImg = Image.FromFile(photo))

{

int imageWidth = originalImg.Width;

int imageHeight = originalImg.Height;

int cutTop = Int32.Parse(Request.Form["top"]);

int cutLeft = Int32.Parse(Request.Form["left"]);

int dropWidth = Int32.Parse(Request.Form["w"]);

int dropHeight = Int32.Parse(Request.Form["h"]);

ImageHelp imgHelp = new ImageHelp();

// string picPath = CommonMethod.GetConfig("HeadPicPath");

string extensionName = System.IO.Path.GetExtension(photo).ToLower();

string picName =DateTime.Now.ToString("yyyyMMddHHmmssff") + extensionName;

string pp = "/Images/" + picName;

imgHelp.GetPart(photo, Server.MapPath("/Images/"), 0, 0, dropWidth, dropHeight, cutLeft, cutTop, imageWidth, imageHeight, picName);

ReWrite("OK", pp);

}

// DelPic(photo);

}