C#MVC和cropper.js实现剪裁图片ajax上传的弹出层
2024-09-01 07:04:34
首先使用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
最新文章
- 不care小米，梁军坦言微鲸才是乐视最大对手
- WordPress上传含有中文文件出现乱码
- POJ 2528 Mayor's posters
- ionic
- Android 异步Http框架简介和实现原理
- Android无线调试及手机设备与PC同屏工具——Chrome插件Vysor
- hadoop配置远程客户端
- 回文串---吉哥系列故事——完美队形II
- fibonacci数列 java
- 解决：Eclipse调试的时候报错'Launching XXX' has encountered a problem. Cannot connect to VM.
- C#打开mdb文件，获取文件下的所有表格，以及获取表格下的所有字段
- javascript删除目标div tr 等
- C语言基础学习运算符-赋值运算符
- css笔记：如何将一个页面平均分成四个部分？
- viewPager使用时加载数据时显示IllegalStateException异常，解决不了。。。。
- Android Material Design 之 Toolbar的使用
- android 设置字体颜色、EditText自己主动输入转换成大写字母的多种方式
- 对C# 中Readonly的再认识
- SVG分组和引用
- git 免密码push