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 ...
随机推荐
- VC++ 定时器使用总结
VC++ WM_TIMER 定时器使用方法 在编程时,会经常使用到定时器.使用定时器的方法比较简单,通常告诉Windows一个时间间隔,然后WINDOWS以此时间间隔周期性触发程 ...
- 品味性能之道<五>：SQL分析工具
一.SQL语句到底是怎么执行的? 想了解SQL语句到底是怎么执行的,那就需要进行SQL语句执行计划分析. 那什么是SQL语句执行计划呢? 就是Oracle服务器执行SQL语句的过程.例如确定是否使用索 ...
- 一名优秀的UI设计师应该具备哪些条件？
想做好一个好的UI设计师除了应该具有一定的审美能力,还要了解整个产品的开发过程,因为目前国内的软件行业还不能对UI设计形成应有的重视度,所以对我们的要求就更高了,你要能作出夺人眼球的东西,还要站在用户 ...
- OSGi 系列（三）之 bundle 事件监听
OSGi 系列(三)之 bundle 事件监听 bundle 的事件监听是在 bundle 生命周期的不同状态相互转换时,OSGi 框架会发出各种不同的事件供事先注册好的事件监听器处理. 1. 事件监 ...
- centos 挂载u盘
1.创建一个目录来挂载U盘 mkdir /mnt/usb #创建usb目录挂载U盘 2.插上U盘,查看移动设备状态 fdisk -l #(注意:参数是小写字母 l 不是数字 1) 会看到类似这一行:/ ...
- KbmMW 4.50.00 测试版发布
We are happy to announce the release of kbmMW v. 4.50.00 Beta Professional and Enterprise Edition wi ...
- 2018.08.16 POJ1183反正切函数的应用（简单数学）
传送门 代数变形一波. 显然有b,c>a. 那么这样的话可以令b=a+m,c=a+n. 又有a=(bc-1)/(b+c). 带入展开可知m*n=a*a+1. 要让m+n最小只需让m最大,这个结论 ...
- 第三章 形容词（Les adjectifs）
★形容词的性(Le genre de l'adjectif ) ()一般规则是在阳性形容词后加-e: français ➞francaise法国的 content ➞c ...
- Django介绍(3)
https://www.cnblogs.com/yuanchenqi/articles/5786089.html
- 使用bat批处理文件备份postgresql数据库
@echo offset pgsql_path=d:\"Program Files"\PostgreSQL\9.3\bin\ //安装目录set database=postgr ...