(此教程包括前端实现图片裁剪,后端进行获取裁剪区并保存)

最近有一个需求,微信公众号上传图片,支持自定义裁剪。

以前用过一款裁剪插件cropper,很久没用了,不知道对移动端操作兼容如何,重新从网上搜索更合适的插件

首先试过PhotoClip,这个插件裁剪区域是固定的,不能自定义缩放(也许需求太匆忙没有研究透,亦或者可以修改原文件优化这一点),对于用户体验不够好,故,放弃

然后又遇到一款插件---Jcrop,完美符合需求,项目结合百度插件 WebUploader上传获取原图,可适配移动端选取相册/拍照上传,获取到选择的照片设置给Jcrop(jcrop.setImage(response.url);)进行裁剪

Jcrop优势:

  • 对所有图片均unobtrusively(无侵入的,保持DOM简洁)
  • 支持宽高比例锁定
  • 支持 minSize/maxSize设置
  • 支持改变选区或移 动选区时的回调(Callback)
  • 支持用键盘微调选区
  • 通过API创建互动,比如动画效果
  • 支持CSS样式
  • 简单便捷,js和css通俗易懂,便于维护

Jcrop实现非常简答, 有兴趣继续看下文:

1、引用js文件和css文件:

  <script type="text/javascript" src="@(WeixinConfig.ResourceAddress)js/jcrop/jquery.Jcrop.js"></script><script type="text/javascript" src="@(WeixinConfig.ResourceAddress)js/jcrop/jquery.color.js"></script><link rel="stylesheet" href="@(WeixinConfig.ResourceAddress)js/jcrop/jquery.Jcrop.css">

2、定义裁剪DOM,仅需要一个Img标签

    <div id="jcropBox" style="width: 100%; height: 90%;"><!-- This is the image we're attaching Jcrop to --><img src="" id="jcropTarget" alt="" /></div>

3、初始化Jcrop

// 默认参数初始化Jcrop
$("#jcropTarget").Jcrop();  

仅需上面三个步骤,就能完成一个支持移动、缩放、拖放的图片裁剪

也可以自定义初始化Jcrop的展现形式

      $('#jcropTarget').Jcrop({onChange: showCoords,onSelect: showCoords,onRelease: clearCoords,boxWidth: jcropW,boxHeight: jcropH,handleSize: isMobile() === 0 ? 28 : 15}, function () {jcrop = this;jcrop.setSelect([130, 65, 130 + 350, 65 + 285]);jcrop.setOptions({bgFade: true,bgOpacity: 0.5,bgColor: 'black',addClass: 'jcrop-light',handleOffset: 20});});

文章最后有各参数说明表格,此处不做一一解释

       function showCoords(c) {x = c.x;y = c.y;w = c.w;h = c.h;};function clearCoords() {$('#coords input').val('');};

进一步对图片进行保存,我采取的是获取裁剪图片的x,y,width,height

添加一个裁剪按钮

<button id="btnSaveJcropImg" class="btnJcrop">裁剪</button>

注册click事件,把最终裁剪的x,y,w,h参数传给后端,进行分析保存

     /// <summary>/// 保存裁剪后的新图片(通过x,y,w,h对原图进行截取)/// </summary>/// <param name="x"></param>/// <param name="y"></param>/// <param name="w"></param>/// <param name="h"></param>/// <param name="fileName">文件名,WebUploader上传到服务器的原图</param>/// <returns></returns>
        [HttpPost]public JsonResult JcropUploadProcess(int x, int y, int w, int h, string fileName){try{ViewBag.YearEndUploadUrl = yearEndUploadUrl;//保存到临时文件夹string path = "/upload/yearend/";string localPath = HttpContext.Server.MapPath(path);if (!System.IO.Directory.Exists(localPath)){System.IO.Directory.CreateDirectory(localPath);}localPath = HttpContext.Server.MapPath(path + "/temp");if (!System.IO.Directory.Exists(localPath)){System.IO.Directory.CreateDirectory(localPath);}// 图片路径string oldPath = System.IO.Path.Combine(localPath, fileName);// 新图片路径string newPath = System.IO.Path.GetExtension(oldPath);newPath = oldPath.Substring(0, oldPath.Length - newPath.Length) + "_new" + newPath;//定义截取矩形System.Drawing.Rectangle cropArea = new System.Drawing.Rectangle(x, y, w, h); //要截取的区域大小//加载图片System.Drawing.Image img = System.Drawing.Image.FromStream(new System.IO.MemoryStream(System.IO.File.ReadAllBytes(oldPath)));//定义Bitmap对象System.Drawing.Bitmap bmpImage = new System.Drawing.Bitmap(img);//进行裁剪System.Drawing.Bitmap bmpCrop = bmpImage.Clone(cropArea, bmpImage.PixelFormat);//保存成新文件
                bmpCrop.Save(newPath);//释放对象
                img.Dispose();bmpCrop.Dispose();//获取文件名+后缀string filePathName = System.IO.Path.GetFileName(newPath);return Json(new{ret = 0,jsonrpc = "2.0",id = "id",filePath = filePathName,url = yearEndUploadUrl + "temp/" + filePathName});}catch (Exception ex){return Json(new { ret = 1, jsonrpc = 2.0, error = new { code = 102, message = ex.Message }, id = "id" });}}

最后附上扩展说明

Options参数说明

参数名 默认值 参数说明
allowSelect true 允许新选框
allowMove true 允许选框移动
allowResize true 允许选框缩放
trackDocument true  
baseClass "jcrop" 基础样式名前缀。说明:class="jcrop-holder",更改的只是其中的 jcrop。
addClass null 添加样式。假设class名为 "test",则添加样式后为class="test jcrop-holder"
bgColor "black" 背景颜色。颜色关键字、HEX、RGB 均可。
bgOpacity 0.6 背景透明度
bgFade false 是否使用背景过渡效果
borderOpacity 0.4 选框边框透明度
handleOpacity 0.5 缩放按钮透明度
handleSize 9 缩放按钮大小
handleOffset 5 缩放按钮与边框的距离
aspectRatio 0 选框宽高比。说明:width/height
keySupport true 支持键盘控制。按键列表:上下左右(移动)、Esc(取消)、Tab(跳出裁剪框,到下一个)
cornerHandles true 允许边角缩放
sideHandles true 允许四边缩放
drawBorders true 绘制边框
dragEdges true 允许拖动边框
fixedSupport true  
touchSupport null  
boxWidth 0 画布宽度
boxHeight 0 画布高度
boundary 2 边界。说明:可以从边界开始拖动鼠标选择裁剪区域
fadeTime 400 过度效果的时间
animationDelay 20 动画延迟
swingSpeed 3 过渡速度
minSelect [0,0] 选框最小选择尺寸。说明:若选框小于该尺寸,则自动取消选择
maxSize [0,0] 选框最大尺寸
minSize [0,0] 选框最小尺寸
onChange function(){} 选框改变时的事件
onSelect function(){} 选框选定时的事件
onRelease function(){} 取消选框时的事件

API方法说明

方法 方法的使用说明
setImage(string) 设定(或改变)图像。例:jcrop_api.setImage("newpic.jpg")
setOptions(object) 设定(或改变)参数,格式与初始化设置参数一样
setSelect(array) 创建选框,参数格式为:[x,y,x2,y2]
animateTo(array) 用动画效果创建选框,参数格式为:[x,y,x2,y2]
release() 取消选框
disable() 禁用 Jcrop。说明:已有选框不会被清除。
enable() 启用 Jcrop
destroy() 移除 Jcrop
tellSelect() 获取选框的值(实际尺寸)。例子:console.log(jcrop_api.tellSelect())
tellScaled() 获取选框的值(界面尺寸)。例子:console.log(jcrop_api.tellScaled())
getBounds() 获取图片实际尺寸,格式为:[w,h]
getWidgetSize() 获取图片显示尺寸,格式为:[w,h]
getScaleFactor() 获取图片缩放的比例,格式为:[w,h]

jQuery Jcrop插件下载(其中css文件有部分优化)

转载于:https://www.cnblogs.com/minily/p/8445158.html

支持移动端裁剪图片插件Jcrop(结合WebUploader上传)相关推荐

  1. asp.net+js+ajax实现手机移动端页面预览、剪裁、上传头像图片

    参考资料:支持移动设备触摸图片裁剪的jQuery插件 移动端html <!DOCTYPE html> <html> <head><meta http-equi ...

  2. vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式

    PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template><div><!--开启摄像头 ...

  3. imgareaselect + php 裁剪和上传,jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能

    本文主要介绍了jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一,需要的朋友可以参考下,希望能帮助到大家. 上一节随笔中,我们已经知道了关于jQuery插件ImgAreaS ...

  4. php jcrop教程,PHP+Jcrop+artDialog头像上传

    上节课我们讲解了artDialog强大的弹出层插件,本文以实例讲解个人中心常用的头像裁剪. 下载资源 下载积分: 120 积分 HTML PHP+Jcrop+artDialog头像上传 引入jQuer ...

  5. fileinput 时间_Bootstrap的fileinput插件实现多文件上传的方法

    *1.bootstrap-fileinput 插件git下载地址 2.解决使用bootstrap-fileinput得到返回值 上传图片 $("#file-0a").fileinp ...

  6. php将图片导入,php中图片文件的导入,上传与下载

    ---------------------------------------------图片的导入-------------------------------------------------- ...

  7. php 使用上传文件预览插件,bootstrap fileinput插件实现预览上传照片功能方法详解...

    本文主要介绍了bootstrap fileinput插件实现预览上传照片功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家. 效果图如下所示: 具体代码如下: cl ...

  8. 导入php插件_漏洞分析丨WordPress评论插件wpDiscuz任意文件上传

    本文共 791 字,预计阅读时间 4 分钟 首发于 『先知社区』 在T00ls上看到一个老哥WordPress站点被搞了,下载了Access日志分析了一下,发现攻击路径是先访问了一个页面,然后访问 / ...

  9. jsp使用七牛云API和webuploader上传多组图片

    文章目录 jsp使用七牛云API和webuploader上传多组图片 介绍 目录树 遇到的问题 上传组件的选择问题 进度条 多线程 前端界面 数据库 关键代码 UserPhotoDaoImpl Upl ...

最新文章

  1. Confluence 6 重构 ancestor 表
  2. Serverless 风起云涌,为什么阿里,微软,AWS 却开始折腾 OAM?
  3. java自我复制_原型模式--自我复制(结合Java浅复制与深复制)
  4. KDevelop的使用(包括交叉编译)[原创]
  5. Default clip could not be found in attached animations list...must be marked as legacy解决办法
  6. 创建user01-user20 随机六位数密码 a-z A-Z 0-9
  7. Spring框架介绍
  8. LVS 就是这么简单(数字后端物理验证篇)
  9. 计算机专业知识3,计算机专业知识试卷3
  10. oracle认证考试_通过获得Oracle助理认证来提升您的职业-PrepAway进行的1Z0-052考试复习
  11. 科比,老大1000天
  12. 纸飞机html,纸飞机.html
  13. homebrew Error: qt: unknown version :mountain_lion
  14. UE使用(UltraEdit)
  15. JSX语法学习(一)
  16. 安卓日记——手把手教你做知乎日报
  17. python摄像头看图识字_《看图识字》小程序开发小结
  18. stm32 薄膜键盘原理_6.4 STM32F103ZET独立按键功能深入剖析(神舟III号)
  19. 五金手册_五金反引号
  20. 杂谈之WEB前端工程师身价

热门文章

  1. 基于Android的健身app
  2. 前端开发需要学python吗_在选择学习Python开发还是前端开发时需要考虑哪些因素...
  3. 使用AlertDialog弹窗实现相机拍照或者从图库选取图片显示
  4. 树莓派无屏幕连接之 VNC realvnc-vnc-viewer
  5. RealVNC Server Ubuntu 20.04 无显示器连接 虚拟显示器
  6. java如何设置classpath_java的环境变量classpath该怎么设置呢?
  7. php 调查问卷特效,swiper-js插件实现的手机问卷调查特效
  8. python发送邮件 python发送qq,163,sohu, xinlang, 126等邮件 python自动发邮件总结及实例说明...
  9. 2018.10.16 NOIP模拟 长者(主席树+hash)
  10. 在鬼语者中看到米帅(温特沃斯·米勒)