支持移动端裁剪图片插件Jcrop(结合WebUploader上传)
(此教程包括前端实现图片裁剪,后端进行获取裁剪区并保存)
最近有一个需求,微信公众号上传图片,支持自定义裁剪。
以前用过一款裁剪插件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上传)相关推荐
- asp.net+js+ajax实现手机移动端页面预览、剪裁、上传头像图片
参考资料:支持移动设备触摸图片裁剪的jQuery插件 移动端html <!DOCTYPE html> <html> <head><meta http-equi ...
- vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template><div><!--开启摄像头 ...
- imgareaselect + php 裁剪和上传,jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能
本文主要介绍了jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一,需要的朋友可以参考下,希望能帮助到大家. 上一节随笔中,我们已经知道了关于jQuery插件ImgAreaS ...
- php jcrop教程,PHP+Jcrop+artDialog头像上传
上节课我们讲解了artDialog强大的弹出层插件,本文以实例讲解个人中心常用的头像裁剪. 下载资源 下载积分: 120 积分 HTML PHP+Jcrop+artDialog头像上传 引入jQuer ...
- fileinput 时间_Bootstrap的fileinput插件实现多文件上传的方法
*1.bootstrap-fileinput 插件git下载地址 2.解决使用bootstrap-fileinput得到返回值 上传图片 $("#file-0a").fileinp ...
- php将图片导入,php中图片文件的导入,上传与下载
---------------------------------------------图片的导入-------------------------------------------------- ...
- php 使用上传文件预览插件,bootstrap fileinput插件实现预览上传照片功能方法详解...
本文主要介绍了bootstrap fileinput插件实现预览上传照片功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家. 效果图如下所示: 具体代码如下: cl ...
- 导入php插件_漏洞分析丨WordPress评论插件wpDiscuz任意文件上传
本文共 791 字,预计阅读时间 4 分钟 首发于 『先知社区』 在T00ls上看到一个老哥WordPress站点被搞了,下载了Access日志分析了一下,发现攻击路径是先访问了一个页面,然后访问 / ...
- jsp使用七牛云API和webuploader上传多组图片
文章目录 jsp使用七牛云API和webuploader上传多组图片 介绍 目录树 遇到的问题 上传组件的选择问题 进度条 多线程 前端界面 数据库 关键代码 UserPhotoDaoImpl Upl ...
最新文章
- Confluence 6 重构 ancestor 表
- Serverless 风起云涌,为什么阿里,微软,AWS 却开始折腾 OAM?
- java自我复制_原型模式--自我复制(结合Java浅复制与深复制)
- KDevelop的使用(包括交叉编译)[原创]
- Default clip could not be found in attached animations list...must be marked as legacy解决办法
- 创建user01-user20 随机六位数密码 a-z A-Z 0-9
- Spring框架介绍
- LVS 就是这么简单(数字后端物理验证篇)
- 计算机专业知识3,计算机专业知识试卷3
- oracle认证考试_通过获得Oracle助理认证来提升您的职业-PrepAway进行的1Z0-052考试复习
- 科比,老大1000天
- 纸飞机html,纸飞机.html
- homebrew Error: qt: unknown version :mountain_lion
- UE使用(UltraEdit)
- JSX语法学习(一)
- 安卓日记——手把手教你做知乎日报
- python摄像头看图识字_《看图识字》小程序开发小结
- stm32 薄膜键盘原理_6.4 STM32F103ZET独立按键功能深入剖析(神舟III号)
- 五金手册_五金反引号
- 杂谈之WEB前端工程师身价
热门文章
- 基于Android的健身app
- 前端开发需要学python吗_在选择学习Python开发还是前端开发时需要考虑哪些因素...
- 使用AlertDialog弹窗实现相机拍照或者从图库选取图片显示
- 树莓派无屏幕连接之 VNC realvnc-vnc-viewer
- RealVNC Server Ubuntu 20.04 无显示器连接 虚拟显示器
- java如何设置classpath_java的环境变量classpath该怎么设置呢?
- php 调查问卷特效,swiper-js插件实现的手机问卷调查特效
- python发送邮件 python发送qq,163,sohu, xinlang, 126等邮件 python自动发邮件总结及实例说明...
- 2018.10.16 NOIP模拟 长者(主席树+hash)
- 在鬼语者中看到米帅(温特沃斯·米勒)