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文件优化
Dec 08 Javascript
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
Java中Timer的用法详解
Oct 21 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
前端路由&amp;webpack基础配置详解
Jun 10 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 Javascript
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
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
php实现图片压缩处理
2020/09/09 PHP
javascript offsetX与layerX区别
2010/03/12 Javascript
jQuery源码分析之Event事件分析
2010/06/07 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
2013/04/24 Javascript
jquery队列queue与原生模仿其实现方法分享
2014/03/25 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
TypeScript入门-接口
2017/03/30 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
nodejs mysql 实现分页的方法
2017/06/06 NodeJs
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
JavaScript函数Call、Apply原理实例解析
2020/02/17 Javascript
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
[46:21]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
Python数据结构与算法之链表定义与用法实例详解【单链表、循环链表】
2017/09/28 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
如何用Python徒手写线性回归
2021/01/25 Python
介绍一下grep命令的使用
2012/06/28 面试题
毕业生找工作的自我评价
2013/10/18 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
绘画专业自荐信
2014/07/04 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书
利用Python+OpenCV三步去除水印
2021/05/28 Python
MySQL中日期型单行函数代码详解
2021/06/21 MySQL