js插件Jcrop自定义截取图片功能


Posted in Javascript onOctober 14, 2016

当初说这个需求的时候,在网上找了一点资料,但是基本上感觉不符合项目中的需求。参照一些项目,和同事的改造,终于是像点样子了。

截图大致截为3个像素,每个像素使用的地方也不同,考虑图片不会是很多,分别压缩保存下来。

根据截取的像素位置,对应的压缩成相应的图片:

js插件Jcrop自定义截取图片功能 

首先需要下载Jcrop.js与uploadify.js 上传图片的插件和截图的插件

Comm_UploadJcrop.js

//剪裁头像对象和宽高比例
var jcrop_api, boundx, boundy;
//上传图片 
//Id:上传控件Id
//IsShowProgress:是否需要展示进度条
//SuccessFunc: 上传成功执行的方法
function UploadImg(Id, IsShowProgress, SuccessFunc,IsJcrop) {
 var uploadObj = $("#" + Id);
 var htmlstr = "<div class='upload_ShowFileProgress' id='" + Id + "-queue' " + (IsShowProgress ? "" : "style='display:none;'") + "></div>";
 uploadObj.parent().append(htmlstr);
 var img_UploadUrl = IsJcrop ? "/Upload/UploadifyHeader" : "/Upload/UploadifyImg"; //Upload控制器中方法
 uploadObj.uploadify({
  //指定swf文件
  'swf': '/Scripts/uploadify/uploadify.swf',//下载uploadify插件中的uploadify.swf
  //后台处理的页面
  'uploader': img_UploadUrl,
  //进度条id
  'queueID': Id + "-queue",
  //进度条显示完成后是否自动消失
  'removeCompleted': false,
  //按钮相关
  'buttonClass': 'btn_Upload',
  'buttonText': '请选择图片',
  'height': '31',
  'width': '108',
  //在浏览窗口底部的文件类型下拉菜单中显示的文本
  'fileTypeDesc': 'Image Files',
  //允许上传的文件后缀
  'fileTypeExts': '*.gif; *.jpg; *.png; *.bmp; *.jpeg; *.svg',
  //选择文件后自动上传
  'auto': true,
  //设置为true将允许多文件上传
  'multi': false,
  'onUploadSuccess': function (file, data, response) {
   if (SuccessFunc != undefined && SuccessFunc != null && SuccessFunc.length > 0) {
    eval(SuccessFunc + "(file,data,response)");
   }
  }
 });
}
//上传文件
//Id:上传控件Id
//IsShowProgress:是否需要展示进度条
//SuccessFunc: 上传成功执行的方法
function UploadFile(Id, IsShowProgress, SuccessFunc) {
 var uploadObj = $("#" + Id);
 var htmlstr = "<div class='upload_ShowFileProgress' id='" + Id + "-queue' " + (IsShowProgress ? "" : "style='display:none;'") + "></div>";
 uploadObj.parent().append(htmlstr);
 uploadObj.uploadify({
  //指定swf文件
  'swf': '/Scripts/uploadify/uploadify.swf',
  //后台处理的页面
  'uploader': '/Upload/Uploadify',
  //进度条id
  'queueID': Id + "-queue",
  //进度条显示完成后是否自动消失
  'removeCompleted': false,
  //按钮相关
  'buttonClass': 'btn_Upload',
  'buttonText': '请选择文件',
  'height': '31',
  'width': '108',
  //上传文件的类型 默认为所有文件
  'All Files': '*.*',
  //在浏览窗口底部的文件类型下拉菜单中显示的文本
  //'fileTypeDesc': 'Image Files',
  //允许上传的文件后缀
  'fileTypeExts': '*.*',
  //选择文件后自动上传
  'auto': false,
  //设置为true将允许多文件上传
  'multi': true,
  'onUploadSuccess': function (file, data, response) {
   if (SuccessFunc != undefined && SuccessFunc != null && SuccessFunc.length > 0) {
    eval(SuccessFunc + "(file,data,response)");
   }
  }
 });
}
//设定图片
function SetJcropImage(url) {
 $(".div_NoFileTip").hide();
 $(".UploadImgContainer").show();
 $("#preview_large").attr("src", url);
 $("#preview_large2").attr("src", url);
 $("#preview_large3").attr("src", url);
 $("#imgsrc").val(url);
 ErealizeJcrop(url);
}
//剪切图片
function ErealizeJcrop(url) {
 var $pcnt = $('#preview_large2').parent(),
  xsize = $pcnt.width(),
  ysize = $pcnt.height();
 $('#preview_large').Jcrop({
  onChange: updatePreview,
  onSelect: updatePreview,
  onSelect: updateCoords,
  aspectRatio: xsize / ysize
 }, function () {
  var bounds = this.getBounds();
  boundx = bounds[0];
  boundy = bounds[1];
  jcrop_api = this;
  // $preview.appendTo(jcrop_api.ui.holder);
 });
 //更换图片时重新加载图片
 if (jcrop_api != undefined)
  jcrop_api.setImage(url);
 function updateCoords(c) {
  $('#x').val(c.x);
  $('#y').val(c.y);
  $('#w').val(c.w);
  $('#h').val(c.h);
 };
 function updatePreview(c) {
  if (parseInt(c.w) > 0) {
   var rx = xsize / c.w;
   var ry = ysize / c.h;

   $("#preview_large2").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'
   });

   $pcnt = $('#preview_large3').parent(),
   xsize2 = $pcnt.height();
   ysize2 = $pcnt.height();
   var rx2 = xsize2 / c.w;
   var ry2 = ysize2 / c.h;

   $("#preview_large3").css({
    width: Math.round(rx2 * boundx) + 'px',
    height: Math.round(ry2 * boundy) + 'px',
    marginLeft: '-' + Math.round(rx2 * c.x) + 'px',
    marginTop: '-' + Math.round(ry2 * c.y) + 'px'
   });

  }
 };

 后台代码: 

#region 判断文件夹是否存在,不存在则创建,返回文件夹路径
  private void CheckFileExistsCreateNew(string filepath)
  {
   if (!Directory.Exists(Server.MapPath(filepath)))
   {
    Directory.CreateDirectory(Server.MapPath(filepath));//创建文件夹
   }
  }
  #endregion

  #region 上传图片

  //上传头像
  [HttpPost]
  public JsonResult UploadifyHeader(HttpPostedFileBase fileData)
  {
   if (fileData != null)
   {
    try
    {
     // 文件上传后的保存路径

     string fileName = Path.GetFileName(fileData.FileName);// 原始文件名称
     string fileExtension = Path.GetExtension(fileName); // 文件扩展名
     string saveName =DateTime.Now.ToString("yyyyMMddHHmmssffff")+"_Y" + fileExtension; // 保存文件名称 
     string Url = "/Upload/" + CurrentUserInfo.Sys_RentCompany.CompanyKey + "/" + CurrentUserInfo.Comm_User.Id + "/UploadImg"; //在项目中创建一个Upload文件夹存放上传和截取的图片 CurrentUserInfo.Sys_RentCompany.CompanyKey 为session 保存的值 这里对应的文件夹的路径 自己可以定义
     string ShowUrl = Url + "/" + saveName;
     string filePhysicalPath = Server.MapPath(ShowUrl);
     //当前登陆人文件夹
     CheckFileExistsCreateNew(Url);

     fileData.SaveAs(filePhysicalPath);

     //压缩图片
     string YsFileImg = ImgHandler.YsImg(ShowUrl, filePhysicalPath);

     return Json(YsFileImg);
    }
    catch (Exception ex)
    {
     return Json(new { Success = false, Message = ex.Message }, JsonRequestBehavior.AllowGet);
    }
   }
   else
   {
    return Json(new { Success = false, Message = "请选择要上传的文件!" }, JsonRequestBehavior.AllowGet);
   }
  }

  //上传头像
  [HttpPost]
  public JsonResult UploadifyImg(HttpPostedFileBase fileData)
  {
   if (fileData != null)
   {
    try
    {
     // 文件上传后的保存路径

     string fileName = Path.GetFileName(fileData.FileName);// 原始文件名称
     string fileExtension = Path.GetExtension(fileName); // 文件扩展名
     string saveName = DateTime.Now.ToString("yyyyMMddHHmmssffff") + "_Y" + fileExtension; // 保存文件名称 
     //string filed = "/Upload/" + saveName;//路经
     string Url = "/Upload/" + CurrentUserInfo.Sys_RentCompany.CompanyKey + "/" + CurrentUserInfo.Comm_User.Id + "/UploadImg";
     string ShowUrl = Url + "/" + saveName;
     string filePhysicalPath = Server.MapPath(ShowUrl);
     //当前登陆人文件夹
     CheckFileExistsCreateNew(Url);

     fileData.SaveAs(filePhysicalPath);

     return Json(ShowUrl);
    }
    catch (Exception ex)
    {
     return Json(new { Success = false, Message = ex.Message }, JsonRequestBehavior.AllowGet);
    }
   }
   else
   {
    return Json(new { Success = false, Message = "请选择要上传的文件!" }, JsonRequestBehavior.AllowGet);
   }
  }

  //保存剪切的图片
  [HttpPost]
  public JsonResult JcropImg(FormCollection colls)
  {
   JsonFormatResult result = new JsonFormatResult { IsSuccess = true, Message = "保存成功!" };
   try
   {
    int x = int.Parse(colls["x"]);
    int y = int.Parse(colls["y"]);
    int w = int.Parse(colls["w"]);
    int h = int.Parse(colls["h"]);
    string imgsrc = colls["imgsrc"];
    string Path = ImgHandler.CutAvatar(imgsrc, x, y, w, h);
    result.Data = Path;
   }
   catch (Exception e)
   {
    result.IsSuccess = false;
    result.Message = e.Message;
   }
   return Json(result);
  } 
  #endregion

照搬的代码肯定会有缺陷,可以根据需求修改成适合的项目。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 替换
Feb 19 Javascript
jquery的ajax请求全面了解
Mar 20 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
js获取内联样式的方法
Jan 27 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
在Vue.js中使用Mixins的方法
Sep 12 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 #Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 #Javascript
JS动态计算移动端rem的解决方案
Oct 14 #Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 #Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 #Javascript
第一次接触神奇的Bootstrap
Oct 14 #Javascript
js仿手机页面文件下拉刷新效果
Oct 14 #Javascript
You might like
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
菜鸟javascript基础资料整理2
2010/12/06 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
2017/08/06 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
Python生成不重复随机值的方法
2015/05/11 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
深入学习python的yield和generator
2016/03/10 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
Python实现判断字符串中包含某个字符的判断函数示例
2018/01/08 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
Python中xml和json格式相互转换操作示例
2018/12/05 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
CSS3 please 跨浏览器的CSS3产生器
2010/03/14 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
单位介绍信范文
2014/01/18 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书