根据用户上传的图片，可以进行缩放裁剪并上传到服务器
前台需要引用两个JS和一个css
JS CSS资源链接：http://pan.baidu.com/s/1kVA7B3D 密码：1zkt
下面是完整 前台代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>图片裁剪</title><script type="text/javascript" src="editimg/js/jquery-1.11.1.min.js"></script><script type="text/javascript" src="editimg/js/cropbox.js"></script><link rel="stylesheet" type="text/css" href="editimg/css/style.css"/></head><body><div align="center"> <p style="color: red"> 上传成功后可能存在延迟，这是因为浏览器缓存的问题，可清理缓存或稍等一会即可成功的替换图片。 </p></div><div class="container" style="margin-left: 320px; margin-top: 20px;"> <div class="imageBox" style="width:700px;" > <div class="thumbBox"></div> <div class="spinner" style="display: none;">Loading...</div> </div> <div class="action" style="width: 700px;"> <input type="file" id="file" style="float:left; width: 250px;margin-left:-200px; display: none"> <input type="button" class="layui-btn layui-btn-small" onclick="clp()" value="选择图片" style="float: left;margin-top: 15px;margin-left:20px;"> <input type="button" class="layui-btn layui-btn-small" id="btnCrop" value="剪切并上传" style="float: right; margin-top: 15px; margin-right: 20px;"> </div> <div class="cropped"></div></div><script type="text/javascript"> function clp() { return $("#file").click(); } $(window).load(function () { var options = { thumbBox: '.thumbBox', spinner: '.spinner', imgSrc: '' } // var cropper = $('.imageBox').cropbox(options); $('#file').on('change', function () { var reader = new FileReader(); reader.onload = function (e) { options.imgSrc = e.target.result; cropper = $('.imageBox').cropbox(options); } reader.readAsDataURL(this.files[0]); this.files = []; }) $('#btnCrop').on('click', function () { $(".cropped").empty(); var img = cropper.getDataURL(); $('.cropped').append('<img src="' + img + '">'); //点击请求发送ajax请求 $.ajax({ url: "BannerImg", data: { "data": img }, type: "post", dataType: "json", }) }) });</script> <div style="text-align:center;"></div> </body></html> ！！上面绿色代码需要根据自己JS CSS的路径进行修改！！ajax请求BannerImg的后台代码如下请查看我前篇文章base64格式的图片转换成图片并保存(ASP.NET)base64格式的图片转换成图片并保存(ASP.NET)这个剪切图片得到的是base64格式的图片，我们需要将base64上传到服务器保存原文链接：http://lovecry.wang/Original/details?random=07b7f4d1-d980-4de2-aedf-acac7f9554e5