C#MVC和cropper.js实现剪裁图片ajax上传的弹出层
首先使用cropper.js插件，能够将剪裁后的图片返回为base64编码，后台根据base64编码解析保存图片。
jQuery.cropper：
是一款使用简单且功能强大的图片剪裁jquery插件。该图片剪裁插件支持图片放大缩小，支持图片旋转，支持触摸屏设备，支持canvas，并且支持跨浏览器使用
网站：http://fengyuanchen.github.io/cropper/
可以自己搜索中文API
前台代码：
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传图片</title>
<script src="~/Content/js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
<link href="~/Content/css/cropper.min.css" rel="stylesheet" />
<link href="~/Content/css/sitelogo.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">
<script src="~/Content/js/bootstrap.min.js"></script>
<script src="~/Content/js/cropper.js"></script>
<script src="~/Content/js/sitelogo.js"></script>
<style type="text/css">
.avatar-btns button {
height: 35px;
}
</style>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#avatar-modal" style="margin: 10px;">修改头像</button>
<div class="user_pic" style="margin: 10px;">
<img src="" />
</div>
<div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="avatar-form" @*action="" enctype="multipart/form-data" method="post"*@ >
@* <form class="avatar-form">*@
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
</div>
<div class="modal-body">
<div class="avatar-body">
<div class="avatar-upload">
<input class="avatar-src" name="avatar_src" type="hidden">
<input class="avatar-data" name="avatar_data" type="hidden">
<label for="avatarInput" style="line-height: 35px;">图片上传</label>
<button class="btn btn-danger" type="button" style="height: 35px;" onclick="$('input[id=avatarInput]').click();">请选择图片</button>
<span id="avatar-name"></span>
<input class="avatar-input hide" id="avatarInput" name="avatar_file" type="file">
</div>
</div>
<div class="row">
<div class="col-md-9">
<div class="avatar-wrapper"></div>
</div>
<div class="col-md-3">
<div class="avatar-preview preview-lg" id="imageHead"></div>
<!--<div class="avatar-preview preview-md"></div>
<div class="avatar-preview preview-sm"></div>-->
</div>
</div>
<div class="row avatar-btns">
<div class="col-md-4">
<div class="btn-group">
<button class="btn btn-danger fa fa-undo" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees">向左旋转</button>
</div>
<div class="btn-group">
<button class="btn btn-danger fa fa-repeat" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees">向右旋转</button>
</div>
</div>
<div class="col-md-5" style="text-align: right;">
<button class="btn btn-danger fa fa-arrows" data-method="setDragMode" data-option="move" type="button" title="移动">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper("setDragMode", "move")"></span>
</button>
<button type="button" class="btn btn-danger fa fa-search-plus" data-method="zoom" data-option="0.1" title="放大图片">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper("zoom", 0.1)">
<!--<span class="fa fa-search-plus"></span>-->
</span>
</button>
<button type="button" class="btn btn-danger fa fa-search-minus" data-method="zoom" data-option="-0.1" title="缩小图片">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper("zoom", -0.1)">
<!--<span class="fa fa-search-minus"></span>-->
</span>
</button>
<button type="button" class="btn btn-danger fa fa-refresh" data-method="reset" title="重置图片">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper("reset")" aria-describedby="tooltip866214"></span>
</button>
</div>
<div class="col-md-3">
<button class="btn btn-danger btn-block avatar-save fa fa-save" type="button" data-dismiss="modal">保存修改</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="~/Content/js/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//做个下简易的验证 大小 格式
$('#avatarInput').on('change', function (e) {
var filemaxsize = 1024 * 5;//5M
var target = $(e.target);
var Size = target[0].files[0].size / 1024;//获取image的尺寸
if (Size > filemaxsize) {
alert("图片过大,请重新选择(<5M)");
$(".avatar-wrapper").empty();//清除
return false;
}//验证格式png,jpeg
if (!this.files[0].type.match(/image.(png|jpeg)/)) {
alert("请选择正确的图片(.jpg/.png/.jpeg)");
} else {
var filename = document.querySelector("#avatar-name");
var texts = document.querySelector("#avatarInput").value;
var teststr = texts; //你这里的路径写错了
testend = teststr.match(/[^\\]+\.[^\(]+/i); //直接完整文件名的
filename.innerHTML = testend;
}
});
//保存
$(".avatar-save").on("click", function () {
var img_lg = document.getElementById('imageHead');
// 截图小的显示框内的内容
html2canvas(img_lg, {
allowTaint: true,
taintTest: false,
onrendered: function (canvas) {
canvas.id = "mycanvas";
//生成base64图片数据
var type = document.getElementById('avatarInput').files[0].type;
var dataUrl = canvas.toDataURL(type);
imagesAjax(dataUrl);
}
});
});
//ajax提交
function imagesAjax(src) {
var data = {};
data.img = src;
$.ajax({
url: '@Url.Action("UploadBase")',
data: data,
type: "POST",
dataType: 'text',
success: function (result) {
$('.user_pic img').attr('src', result);
},
error: function (x, s, e) {
//请求出错处理
alert(x.status + " " + s + " " + e);
}
});
}
</script>
</body>
</html>
后台代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; using System.IO;
using System.Xml;
using System.Xml.Schema; using System.Drawing;
using System.Net;
using System.Net.Http;
using System.Runtime.Serialization.Formatters.Binary;
using System.Web.Http; namespace MvcDemo.Controllers
{
public class UploadImagesController : Controller
{
//
// GET: /UploadImages/ public ActionResult Index()
{
return View();
} public ActionResult Upload()
{
return View();
} /// <summary>
/// 接收前台传来的Base64编码
/// </summary>
public string UploadBase(string img)
{
string path = Common.UploadFile.Upload(img);
return path;
} public ActionResult UploadImg()
{
//上传文件
HttpPostedFileBase img = Request.Files["btnfile"];
string s = img.FileName;
string fileExtension = Path.GetExtension(s);
string path = "/Temp/";
if (Directory.Exists(Server.MapPath(path)) == false)//如果不存在就创建file文件夹
{
Directory.CreateDirectory(Server.MapPath(path));
} string virpath = path + Guid.NewGuid() + fileExtension; img.SaveAs(Server.MapPath(virpath));
return Content(virpath);
} }
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text; using System.Drawing;
using System.IO; namespace Common
{
/// <summary>
/// 上传文件公共类
/// </summary>
public static class UploadFile
{
//静态 当前项目的路径
private static string rootPath = AppDomain.CurrentDomain.BaseDirectory; //静态 要保存的路径
private static string path = "/UploadImages/"; /// <summary>
/// 接收Base64编码格式的图片
/// </summary>
/// <param name="img">图片Base64字符串</param>
/// <returns>图片路径</returns>
public static string Upload(string img)
{ if (!IsBase64(img))//判断是否是base64字符串
return null; //获取文件后缀,判断格式
string suffix = GetSuffixFromBase64Str(img);
string pattren = @"png|jpeg+$";//正则验证
if (!System.Text.RegularExpressions.Regex.IsMatch(suffix, pattren))
{
return null;
} //如果不存在就创建file文件夹
if (Directory.Exists(rootPath + path) == false)
{ Directory.CreateDirectory(rootPath + path);
} //防止同名的两种方法,一是获取当前时间与指定时间的毫秒差作为名字
//而是通过唯一的GUID
//图片名
//string datetime = GetTimeStamp();
// 文件夹 图片名 后缀名
//string dbPath = path + GetTimeStamp() + suffix; // 生成一个新的 GUID 唯一值
string dbPath = path + Guid.NewGuid() + "." + suffix; //保存路径
string savePath = rootPath + dbPath; try
{
//截取base64串
//string strBase = img.Split(',')[1];
//获取图片并保存
Base64ToImg(img.Split(',')[]).Save(savePath);
}
catch (Exception)
{
return null;
} return dbPath;
} /// <summary>
/// 删除文件
/// </summary>
/// <param name="fileUrl">路径</param>
public static void DeleteImgFile(string fileUrl)
{
string file = System.Web.HttpContext.Current.Server.MapPath(fileUrl);
//文件是否存在
if (File.Exists(file))
{
File.Delete(file);
}
} //解析base64编码获取图片
private static Bitmap Base64ToImg(string base64Code)
{
MemoryStream stream = new MemoryStream(Convert.FromBase64String(base64Code));
return new Bitmap(stream);
} //获取当前时间段额时间戳
private static string GetTimeStamp()
{
TimeSpan ts = DateTime.UtcNow - new DateTime(, , , , , , );
return Convert.ToInt64(ts.TotalMilliseconds).ToString();
} //判读是否是base64编码
private static char[] base64CodeArray = new char[]
{
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
'', '', '', '', '', '', '', '', '', '', '+', '/', '='
}; /// <summary>
/// 是否base64字符串
/// </summary>
/// <param name="base64Str">要判断的字符串</param>
/// <returns></returns>
private static bool IsBase64(string base64Str)
{
byte[] bytes = null;
return IsBase64(base64Str, out bytes);
} /// <summary>
/// 是否base64字符串
/// </summary>
/// <param name="base64Str">要判断的字符串</param>
/// <param name="bytes">字符串转换成的字节数组</param>
/// <returns></returns>
private static bool IsBase64(string base64Str, out byte[] bytes)
{
//string strRegex = "^([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{4}|[A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{2}==)$";
bytes = null;
if (string.IsNullOrEmpty(base64Str))
return false;
else
{
if (base64Str.Contains(","))
base64Str = base64Str.Split(',')[];
if (base64Str.Length % != )
return false;
if (base64Str.Any(c => !base64CodeArray.Contains(c)))
return false;
}
try
{
bytes = Convert.FromBase64String(base64Str);
return true;
}
catch (FormatException)
{
return false;
}
} /// <summary>
/// 把base64字符串转换成Bitmap
/// </summary>
/// <param name="base64Str">要转换的base64字符串</param>
/// <returns></returns>
private static Bitmap Base64ToBitmap(string base64Str)
{
Bitmap bitmap = null;
byte[] bytes = null;
try
{
if (IsBase64(base64Str, out bytes))
{
using (MemoryStream stream = new MemoryStream(bytes))
{
stream.Seek(, SeekOrigin.Begin);//为了避免有时候流指针定位错误，显式定义一下指针位置
bitmap = new Bitmap(stream);
}
}
}
catch (Exception)
{
bitmap = null;
}
return bitmap;
} /// <summary>
/// 根据base64字符串获取文件后缀（图片格式）
/// </summary>
/// <param name="base64Str">base64</param>
/// <returns></returns>
private static string GetSuffixFromBase64Str(string base64Str)
{
string suffix = string.Empty;
string prefix = "data:image/";
if (base64Str.StartsWith(prefix) && base64Str.Contains(";") && base64Str.Contains(","))
{
base64Str = base64Str.Split(';')[];
suffix = base64Str.Substring(prefix.Length);
}
return suffix;
}
}
}
Data URI scheme
Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。 在上面的Data URI中，data表示取得数据的协定名称，image/png 是数据类型名称，base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。 支持的格式：data:image/png;base64,base64编码的png图片数据 data:image/jpeg;base64,base64编码的jpeg图片数据 把图像文件的内容直接写在了HTML 文件中，这样做的好处是，节省了一个HTTP 请求。坏处是浏览器不会缓存这种图像。 Jpg和jpeg格式，扩展名的实质是相同的
GUID
GUID（全球唯一标识符） 是一种由算法生成的二进制长度为128位的数字标识符，在理想情况下，任何计算机和计算机集群都不会生成两个相同的GUID，。随机生成两个相同GUID的可能性是非常小的，但并不为0。所以，用于生成GUID的算法通常都加入了非随机的参数（如时间），以保证这种重复的情况不会发生
这是通过ajax直接上传的没有经过剪裁： https://www.cnblogs.com/bubugao/p/MyAjaxForm.html
C#MVC和cropper.js实现剪裁图片ajax上传的弹出层的更多相关文章
- 基于HTML5的可预览多图片Ajax上传
一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...
- HTML5可预览多图片ajax上传(使用formData传递数据)
HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...
- 基于vue + axios + lrz.js 微信端图片压缩上传
业务场景 微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...
- 纯原生js移动端图片压缩上传插件
前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...
- 通过修改ajaxFileUpload.js实现多图片动态上传并实现预览
参考:http://smotive.iteye.com/blog/1903606 大部分我也是根据他的方法修改的,我也要根据name实现动态的多文件上传功能,但是有个问题使我一直无法实现多文件上传. ...
- 基于HTML5和JSP实现的图片Ajax上传和预览
本文对如何实现使用Ajax提交"multipart/form"格式的表单数据,已经如何在图片上传之前,在浏览器上进行预览.使用的主要相关技术HTML5的FILE API,XMLHt ...
- h5可预览 图片ajax上传 ，后台有点弱不知道数据怎么取，但是可以肯定数据上传成功了
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- canvas剪裁图片并上传，前端一步到位，无需用到后端
背景: 当前主流的图片剪裁主要有两种实现方式. 1:flash操作剪裁.2:利用js和dom操作剪裁. 目前看来这个剪裁主要还是先通过前端上传图片到服务器,然后前端操作后把一些坐标和大小数据传到后台, ...
- MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传
前段时间做了几个关于图片.文件上传的Demo,使用客户端Query-File-Upload插件和服务端Badkload组件实现多文件异步上传,比如"MVC文件上传04-使用客户端jQuery ...
随机推荐
- 43-python-自己的词典
可以用python实现一个自己的词典, 就是在网上下一个英汉词典,作为自己的词库,然后整理出一个json文件,存起来,查词时,直接读取查询: 处理时可以用正则表达式处理: https://www.cn ...
- 接触mybatis使用
1.mybatis mybatis是一个自定义sql.存储过程和高级映射的持久层框架,是Apache下的顶级项目. mybatis可以让程序员将主要精力放在sql上,通过mybatis提供的映射方式. ...
- WPF之DataGrid控件根据某列的值设置行的前景色(色
一种方法是 使用 datagrid的LoadingRow事件: private void DataGrid_LoadingRow(object sender, DataGridRowEventArgs ...
- toArray()
- vc到vs2015消息函数
afx_msg LRESULT OnMyIconNotify(WPARAM wParam,LPARAM lParam); vc6 可以是void vs2015不可以 ON_MESSAGE(MYWM_ ...
- [Groovy] List和Map用法搜集
http://chenfeng0104.iteye.com/blog/609075 http://www.cnblogs.com/muzi1994/p/5169928.html https://zhi ...
- ubuntu and centos各种上网代理设置
1.Ubuntu 一. apt-get 代理设置 由于公司通过代理上网,firefox的代理设置很容易就搞定了,但是通过apt-get安装软件还是不行,于是,查阅了很多资料,最多的方法就是网上流传的三 ...
- c#递归实现螺旋数组
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...
- 彻底测试全部拷贝list相关操作的区别python
1.用浅拷贝后修改数字,可以起到与原数据分离的效果 import copy origin = [, , [, ]] #origin 里边有三个元素:, ,[, ] cop1=origin.copy() ...
- 移动文件流的读写指针---fseek
函数原型:int fseek(FILE *stream,long offset,int origin) stream:文件指针, offset:偏移量,正数表示正向偏移,负数表示负向偏移.origin ...