上传头像并裁剪
界面一：
界面二：
jQuery(function ($) {
// Create variables (in this scope) to hold the API and image size
var jcrop_api,
boundx,
boundy,
// Grab some information about the preview pane
$preview = $('#preview-pane'),
$pcnt = $('#preview-pane .preview-container'),
$pimg = $('#preview-pane .preview-container img'),
xsize = $pcnt.width(),
ysize = $pcnt.height();
//console.log('init', [xsize, ysize]);
$('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: xsize / ysize
}, function () {
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
// Move the preview into the jcrop container for css positioning
$preview.appendTo(jcrop_api.ui.holder);
});
function updatePreview(c) {
if (parseInt(c.w) > 0) {
var rx = xsize / c.w;
var ry = ysize / c.h;
$pimg.css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
$('#x1').val(c.x);//左顶点的x坐标
$('#y1').val(c.y);//右顶点的x坐标
$('#w').val(c.w);//截图的宽度
$('#h').val(c.h);//截图的高度
$('#btnX').html(c.x);//左顶点的x坐标
$('#btnY').html(c.y);//右顶点的x坐标
$('#btnW').html(c.w);//截图的宽度
$('#btnH').html(c.h);//截图的高度
};
});
//上传文件
layui.use('upload', function () {
var upload = layui.upload;
//单个文件上传
var uploadInst = upload.render({
elem: '#btnUpload' //绑定元素
, url: '/test/ashx/ashx.ashx' //上传接口
, data: {
action: "uploadimg"
//, maxSize: $(".jcrop-holder>.jcrop-tracker").width()
}
, before: function (obj) {//在 choose 回调之后、done/error 回调之前触发
//layer.load(); //上传loading
}
, done: function (res) {
//上传完毕回调
$("#target").attr("src", res.data.src);
$(".jcrop-holder>img").attr("src", res.data.src);
$(".preview-container>img.jcrop-preview").attr("src", res.data.src);
$(".jcrop-tracker").siblings("img").attr("src", res.data.src);
//上传图片后-确定按钮可用
$("#btnOk").removeClass("layui-btn-disabled");
}
, error: function () {
//请求异常回调
}
});
});
//确定
$("#btnOk").on("click", function () {
if (!$(this).hasClass("layui-btn-disabled")) {
var x= $('#x1').val();//左顶点的x坐标
var y = $('#y1').val();//右顶点的x坐标
var w = $('#w').val();//截图的宽度
var h = $('#h').val();//截图的高度
$.ajax({
//提交数据的类型 POST GET
type: "POST",
//提交的网址
url: '/test/ashx/ashx.ashx',
//提交的数据
data: {
action: "cutimg",
x: x,
y: y,
w: w,
h: h,
src: $("#target").attr("src"),
maxWidth: $(".jcrop-holder>.jcrop-tracker").width(),
maxHeight: $(".jcrop-holder>.jcrop-tracker").height()
},
//返回数据的格式-"xml", "html", "script", "json", "jsonp", "text".
datatype: "json",
//成功返回之后调用的函数
success: function (data) {
if (data.code == 0) {
parent.Update(data.src);
CloseThis();
}
},
//调用出错执行的函数
error: function () {
//请求出错处理
}
});
}
});
//关闭当前iframe
function CloseThis() {
//先得到当前iframe层的索引
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index); //再执行关闭
}
////// 上传图片(如果没有传入宽高,不压缩图片) /// /// ///private string Uploadimg(HttpContext context) { int maxSize = 0;//压缩后的最大尺寸（长或高，单位px） int.TryParse(context.Request.Params["maxSize"], out maxSize); //图片保存路径 string savePath = "/uploadfiles/test/" + DateTime.Now.ToString("yyyyMM") + "/"; if (!Directory.Exists(context.Server.MapPath(savePath))) { Directory.CreateDirectory(context.Server.MapPath(savePath)); } string fileName = Guid.NewGuid().ToString("N"); HttpPostedFile file = context.Request.Files[0];//上传的图片 if (file != null) {//上传的图片不为空 string fileExt = Path.GetExtension(file.FileName);//文件扩展名 fileName += fileExt; //压缩后的图片 Bitmap img = FileExt.ImageZip(file.InputStream, fileExt, maxSize); if (img != null) {//压缩后的图片不为空 img.Save(context.Server.MapPath(savePath + fileName)); } else {//原图片保存 file.SaveAs(context.Server.MapPath(savePath + fileName)); } } return "{\"code\":0,\"msg\":\"上传成功\",\"data\":{\"src\":\"" + (savePath + fileName) + "\"}}"; }
////// 裁剪图片-返回裁剪后的图片地址 /// /// ///private string CutImg(HttpContext context) { string src = context.Request.Params["src"];//原图片地址 Image file = Image.FromFile(context.Server.MapPath(src));//上传的图片 int x = string.IsNullOrEmpty(context.Request.Params["x"]) ? 0 : int.Parse(context.Request.Params["x"]);//左顶点的x坐标 int y = string.IsNullOrEmpty(context.Request.Params["y"]) ? 0 : int.Parse(context.Request.Params["y"]);//右顶点的x坐标 int w = string.IsNullOrEmpty(context.Request.Params["w"]) ? 0 : int.Parse(context.Request.Params["w"]);//截图的宽度 int h = string.IsNullOrEmpty(context.Request.Params["h"]) ? 0 : int.Parse(context.Request.Params["h"]);//截图的高度 int maxWidth = string.IsNullOrEmpty(context.Request.Params["maxWidth"]) ? 0 : int.Parse(context.Request.Params["maxWidth"]);//最大宽 int maxHeight = string.IsNullOrEmpty(context.Request.Params["maxHeight"]) ? 0 : int.Parse(context.Request.Params["maxHeight"]);//最大高 string fileExt = Path.GetExtension(src);//图片格式 string fileName = Guid.NewGuid().ToString("N") + fileExt; string savePath = "/uploadfiles/test/" + DateTime.Now.ToString("yyyyMM") + "/" + fileName; CutImage(GetReducedImage(file, maxHeight, maxHeight), x, y, w, h, savePath, context); return "{\"code\":0,\"src\":\"" + savePath + "\"}"; } /// /// 生成缩略图重载方法1，返回缩略图的Image对象 /// /// 缩略图的宽度 /// 缩略图的高度 ///缩略图的Image对象 public Bitmap GetReducedImage(Image ResourceImage, int Width, int Height) { try { //用指定的大小和格式初始化Bitmap类的新实例 Bitmap bitmap = new Bitmap(Width, Height, PixelFormat.Format32bppArgb); //从指定的Image对象创建新Graphics对象 Graphics graphics = Graphics.FromImage(bitmap); //清除整个绘图面并以透明背景色填充 graphics.Clear(Color.Transparent); //在指定位置并且按指定大小绘制原图片对象 graphics.DrawImage(ResourceImage, new Rectangle(0, 0, Width, Height)); return bitmap; } catch (Exception e) { return null; } } ////// 截取图片方法 /// /// 原图 /// 开始位置-X /// 开始位置-Y /// 截取宽度 /// 截取长度 /// 保存路径 /// 上下文 public static void CutImage(Bitmap bitmap, int beginX, int beginY, int width, int height, string path, HttpContext context) { if (beginX + width > bitmap.Width) beginX = bitmap.Width - width; if (beginY + height > bitmap.Height) beginY = bitmap.Height - height; Bitmap destBitmap = new Bitmap(width, height);//目标图 Rectangle destRect = new Rectangle(0, 0, width, height);//矩形容器 Rectangle srcRect = new Rectangle(beginX, beginY, width, height); Graphics g = Graphics.FromImage(destBitmap); g.DrawImage(bitmap, destRect, srcRect, GraphicsUnit.Pixel); destBitmap.Save(context.Server.MapPath(path), ImageFormat.Jpeg); }
分类: js/css, layui
标签: 裁剪图片, 截图