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 相关文章推荐
JavaScript 撑出页面文字换行
Jun 15 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
Oct 11 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
vue实现nav导航栏的方法
Dec 13 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 Javascript
vue.js element-ui tree树形控件改iview的方法
Mar 29 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 Javascript
JavaScript如何实现元素全排列实例代码
May 14 Javascript
Vue数据双向绑定底层实现原理
Nov 22 Javascript
JS运算符优先级与表达式示例详解
Sep 04 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
咖啡语言
2021/03/03 咖啡文化
php更新修改excel中的内容实例代码
2014/02/26 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
解读ES6中class关键字
2017/11/20 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
在python中的socket模块使用代理实例
2014/05/29 Python
Python实用日期时间处理方法汇总
2015/05/09 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
快速了解Python相对导入
2018/01/12 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
python过滤中英文标点符号的实例代码
2019/07/15 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
优秀求职自荐信怎样写
2013/12/18 职场文书
军训口号
2014/06/13 职场文书
体育口号大全
2014/06/18 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
道德模范事迹材料
2014/12/20 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书
Python实现机器学习算法的分类
2021/06/03 Python
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python