layui+croppers完成图片剪切上传
不多说直接上代码：
前台代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../layui/layui/css/layui.css" rel="stylesheet" />
<link href="../layui/cropper/cropper.css" rel="stylesheet" />
</head>
<body>
<div class="layui-form-item">
<label class="layui-form-label">头像</label>
<div class="layui-input-inline">
<input type="text" name="head" lay-verify="required" id="inputimgurl" placeholder="图片地址" value="123.jpg" class="layui-input">
</div>
<div class="layui-input-inline">
<div class="layui-upload-list" style="margin:0">
<img src="./微信图片_20190404185124.png" id="srcimgurl" class="layui-upload-img">
</div>
</div>
<div class="layui-input-inline layui-btn-container" style="width: auto;">
<button class="layui-btn layui-btn-primary" id="editimg">修改图片</button>
</div>
<div class="layui-form-mid layui-word-aux">头像的尺寸限定150x150px,大小在50kb以内</div>
</div>
<script src="../layui/layui/layui.js"></script>
<link href="../layui/cropper/cropper.css" rel="stylesheet" />
<script src="../layui/cropper/croppers.js"></script>
<script>
layui.config({
base: '/layui/cropper/' //layui自定义layui组件目录
}).use(['form', 'croppers'], function () {
var $ = layui.jquery
, form = layui.form
, croppers = layui.croppers
, layer = layui.layer; //创建一个头像上传组件
croppers.render({
elem: '#editimg'
, saveW: 150 //保存宽度
, saveH: 150
, mark: 1 / 1 //选取比例
, area: '900px' //弹窗宽度
, url: "/home/UpLoadImg" //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
, done: function (url) { //上传完毕回调
$("#inputimgurl").val(url);
$("#srcimgurl").attr('src', url);
}
}); });
</script>
</body>
</html>
后台代码：
[HttpPost]
public ActionResult UpLoadImg()
{ //HttpPostedFileBase file = Request.Files["upfile"];
HttpPostedFileBase file = Request.Files["file"];
var type = Request.Form["type"];
var filename = string.Format("{0:yyyyMMddHHmmssfffffff}", DateTime.Now) + ".jpg";
if (file != null)
{ string path = HttpContext.Server.MapPath("/Images/Uploads");
string filePath = Path.Combine(path, Path.GetFileName(filename));
//根据需要创建文件夹
CreateFolderIfNeeded(path);
//将图片保存到IIS
file.SaveAs(filePath);
} return Json(new { code=,data= filename });
}
croppers.js代码：
/*!
* Cropper v3.0.0
*/ layui.config({
base: '/static/cropper/' //layui自定义layui组件目录
}).define(['jquery','layer','cropper'],function (exports) {
var $ = layui.jquery
,layer = layui.layer;
var html = "<link rel=\"stylesheet\" href=\"/static/cropper/cropper.css\">\n" +
"<div class=\"layui-fluid showImgEdit\" style=\"display: none\">\n" +
" <div class=\"layui-form-item\">\n" +
" <div class=\"layui-input-inline layui-btn-container\" style=\"width: auto;\">\n" +
" <label for=\"cropper_avatarImgUpload\" class=\"layui-btn layui-btn-primary\">\n" +
" <i class=\"layui-icon\"></i>选择图片\n" +
" </label>\n" +
" <input class=\"layui-upload-file\" id=\"cropper_avatarImgUpload\" type=\"file\" value=\"选择图片\" name=\"file\">\n" +
" </div>\n" +
" <div class=\"layui-form-mid layui-word-aux\">头像的尺寸限定150x150px,大小在50kb以内</div>\n" +
" </div>\n" +
" <div class=\"layui-row layui-col-space15\">\n" +
" <div class=\"layui-col-xs9\">\n" +
" <div class=\"readyimg\" style=\"height:450px;background-color: rgb(247, 247, 247);\">\n" +
" <img src=\"\" >\n" +
" </div>\n" +
" </div>\n" +
" <div class=\"layui-col-xs3\">\n" +
" <div class=\"img-preview\" style=\"width:200px;height:200px;overflow:hidden\">\n" +
" </div>\n" +
" </div>\n" +
" </div>\n" +
" <div class=\"layui-row layui-col-space15\">\n" +
" <div class=\"layui-col-xs9\">\n" +
" <div class=\"layui-row\">\n" +
" <div class=\"layui-col-xs6\">\n" +
" <button type=\"button\" class=\"layui-btn layui-icon layui-icon-left\" cropper-event=\"rotate\" data-option=\"-15\" title=\"Rotate -90 degrees\"> 向左旋转</button>\n" +
" <button type=\"button\" class=\"layui-btn layui-icon layui-icon-right\" cropper-event=\"rotate\" data-option=\"15\" title=\"Rotate 90 degrees\"> 向右旋转</button>\n" +
" </div>\n" +
" <div class=\"layui-col-xs5\" style=\"text-align: right;\">\n" +
" <button type=\"button\" class=\"layui-btn\" title=\"移动\"></button>\n" +
" <button type=\"button\" class=\"layui-btn\" title=\"放大图片\"></button>\n" +
" <button type=\"button\" class=\"layui-btn\" title=\"缩小图片\"></button>\n" +
" <button type=\"button\" class=\"layui-btn layui-icon layui-icon-refresh\" cropper-event=\"reset\" title=\"重置图片\"></button>\n" +
" </div>\n" +
" </div>\n" +
" </div>\n" +
" <div class=\"layui-col-xs3\">\n" +
" <button class=\"layui-btn layui-btn-fluid\" cropper-event=\"confirmSave\" type=\"button\"> 保存修改</button>\n" +
" </div>\n" +
" </div>\n" +
"\n" +
"</div>";
var obj = {
render: function(e){
$('body').append(html);
var self = this,
elem = e.elem,
saveW = e.saveW,
saveH = e.saveH,
mark = e.mark,
area = e.area,
url = e.url,
done = e.done; var content = $('.showImgEdit')
,image = $(".showImgEdit .readyimg img")
,preview = '.showImgEdit .img-preview'
,file = $(".showImgEdit input[name='file']")
, options = {aspectRatio: mark,preview: preview,viewMode:}; $(elem).on('click',function () {
layer.open({
type:
, content: content
, area: area
, success: function () {
image.cropper(options);
}
, cancel: function (index) {
layer.close(index);
image.cropper('destroy');
}
});
});
$(".layui-btn").on('click',function () {
var event = $(this).attr("cropper-event");
//监听确认保存图像
if(event === 'confirmSave'){
image.cropper("getCroppedCanvas",{
width: saveW,
height: saveH
}).toBlob(function(blob){
var formData=new FormData();
formData.append('file',blob,'head.jpg');
$.ajax({
method:"post",
url: url, //用于文件上传的服务器端请求地址
data: formData,
processData: false,
contentType: false,
success:function(result){
if(result.code == ){
layer.msg(result.msg,{icon: });
layer.closeAll('page');
return done(result.data.src);
}else if(result.code == -){
layer.alert(result.msg,{icon: });
} }
});
});
//监听旋转
}else if(event === 'rotate'){
var option = $(this).attr('data-option');
image.cropper('rotate', option);
//重设图片
}else if(event === 'reset'){
image.cropper('reset');
}
//文件选择
file.change(function () {
var r= new FileReader();
var f=this.files[];
r.readAsDataURL(f);
r.onload=function (e) {
image.cropper('destroy').attr('src', this.result).cropper(options);
};
});
});
} };
exports('croppers', obj);
});
cropper插件可以直接网上下载。
基本剪切上传图片功能完成，还需要修改样式和处理返回值的需要根据自己需要改动下代码。出处x-admin-》第三方插件-》截图
layui+croppers完成图片剪切上传的更多相关文章
- cropper实现图片剪切上传
一.引入文件 <script src="jquery.min.js"></script> <link rel="stylesheet&quo ...
- Vue项目图片剪切上传——vue-cropper的使用
最近自己在研究vue,然后做了一个小型的后台管理系统用来练手,开发过程中,想到了剪切图片上传用户头像的需求.上网百度了一番,发现好多用的都是vue-cropper.我也就用了,个人感觉还是挺好用的.现 ...
- 分享图片压缩上传demo,可以选择一张或多张图片也可以拍摄照片
2016-08-05更新: 下方的代码是比较OLD的了,是通过js进行图片的剪切 旋转 再生成,效率较低. 后来又整合了一个利用native.js本地接口的压缩代码 ,链接在这 .页面中有详细的说明, ...
- asp.net实现图片在线上传并在线裁剪
1.说明 接上一篇文章uploadify实现多附件上传完成后,又突然用到头像上传并在线裁剪.在网上找个众多例子都没有符合要求的,有一篇文章写的不错,就是文旺老兄写的这篇Asp.Net平台下的图片在线裁 ...
- 三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)
涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为 ...
- springmvc图片文件上传接口
springmvc图片文件上传 用MultipartFile文件方式传输 Controller package com.controller; import java.awt.image.Buffer ...
- base64格式的图片如何上传到oss
---恢复内容开始--- 对于base64图片的上传这个东西,一直是一个问题尤其是上传到oss.我们这次开发由于需要修剪图片,使用了h5的很多新特性. h5修剪图片,使用了我们的canvas.这个步骤 ...
- Html5+asp.net mvc 图片压缩上传
在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法 ...
- PHP裁剪图片并上传完整demo
日前根据功能需求,要做一个图片裁剪上传的功能,在网上找了好久,找到了这位仁兄写的demo! 下载压缩包
随机推荐
- 洛谷P3959——宝藏
传送门:QAQQAQ 题意: 参与考古挖掘的小明得到了一份藏宝图,藏宝图上标出了$n$个深埋在地下的宝藏屋, 也给出了这$n$个宝藏屋之间可供开发的$m$条道路和它们的长度. 小明决心亲自前往挖掘所有 ...
- Android Telephony分析(一) ---- Phone详解
目录: Phone的继承关系与PhoneFactory(GsmCdmaPhone.ImsPhone.SipPhone) Phone进程的启动 Phone对象的初始化(DefaultPhoneNotif ...
- HashMap底层实现原理及面试问题
①HashMap的工作原理 HashMap基于hashing原理,我们通过put()和get()方法储存和获取对象.当我们将键值对传递给put()方法时,它调用键对象的hashCode()方法来计算h ...
- Neo4j使用简单例子
Neo4j Versions Most of the examples on this page are written with Neo4j 2.0 in mind, so they skip th ...
- shell 通配符，管道符，输入/输出重定向，命令置换
1. echo 输出 [echo 输出的内容 ]把内容输出到终端上 如果字符串使用双引号,echo命令原样输出 [ echo "hello world" ] ...
- CSIC_716_20191119【常用模块的用法 subprocess、re、logging、防止自动测试、包的理论】
subprocess模块 可以通过python代码给操作系统终端发送命令,并可以得到返回结果. import subprocess str = input('>>>请输入命令') # ...
- VMware的使用-永久激活码
1.在软件管理中下载安装VMware 版本为14.0 试用期为30天 2.在网上找的永久破解码 VMware 2018 v14.x 永久许可证激活密钥FF31K-AHZD1-H8ETZ-8WWE ...
- thinkphp 使用函数
我们往往需要对模板输出变量使用函数,可以使用: 大理石平台支架 {$data.name|md5} 编译后的结果是: <?php echo (md5($data['name'])); ?> ...
- C++利用动态数组实现顺序表（不限数据类型）
通过类模板实现顺序表时,若进行比较和遍历操作,模板元素可以通过STL中的equal_to仿函数实现,或者通过回调函数实现.若进行复制操作,可以采用STL的算法函数,也可以通过操作地址实现.关于回调函数 ...
- LUOGU P3919 【模板】可持久化数组(主席树)
传送门 解题思路 给每一时刻建一棵线段树维护当前时刻的值,然后修改的时候直接修改,查询的时候直接查,记住查询完后一定要复制. 代码 #include<iostream> #include& ...