江西汽车网站建设,内网访问 wordpress,新项目如何推广,网站登录超时怎么解决图片上传裁剪这功能随处可见#xff0c;有的自己写#xff0c;不过太耗费时间了#xff0c;插件的话感觉好多#xff0c;前段时间就想挑一款好的插件#xff0c;以后就用那款#xff0c;可是挑了几款插件用上去#xff0c;效果很好#xff0c;问题就出在合并了#xf…图片上传裁剪这功能随处可见有的自己写不过太耗费时间了插件的话感觉好多前段时间就想挑一款好的插件以后就用那款可是挑了几款插件用上去效果很好问题就出在合并了单一的插件效果是很好的没问题不然人家也不用吃饭了可是当我把这几款插件合并一起用的时候就各种奇怪的问题出来了决解了一个又跑出一个来了最后挑了好半天发现了一款还好用的就赶紧的记录下来了不然以后要用又要找麻烦死了浪费时间啊所以记录一下心得一步到位。 第一步html代码 script src~/Scripts/jquery-1.10.2.min.js/script!--要9.0以上的版本--
script src~/js/jquery.form.js/script!--一步上传提交上传此插件不是裁剪属于另外下载的为了方便异步上传提交--
link href~/css/bootstrap.min.css relstylesheet /
link href~/css/cropper.css relstylesheet /
link href~/css/docs.css relstylesheet /
script src~/js/bootstrap.min.js/script
script src~/js/cropper.js/script!--裁剪上传 http://fengyuanchen.github.io/cropper/ --form action# idform_upload methodpostlabel stylewidth:60px;height:30px; forinputImage title打开图片input classhide idinputImage namefile typefile acceptimage/*浏览.../label!--上传提示--div classupload_tag/divdiv stylemargin-top:10px;div stylewidth:100px;height:100px;img altPicture classcropper src/images/background1.jpg //divbr /br /div classpreview preview-lg/div/divbr /br /divinput typesubmit value上传 classbtn upload_point btn-primary stylewidth:60px;height:30px; //div
/form View Code 第二步docs.js代码 $(function () {var $image $(.cropper),$dataX $(#dataX),$dataY $(#dataY),$dataHeight $(#dataHeight),$dataWidth $(#dataWidth),//console window.console || { log: $.noop },cropper;$image.cropper({aspectRatio: 1,//纵横比例string/number,默认auto,1表示正方形,16/4表示长方形autoCropArea: 0.3,//0和1之间的数。定义自动裁剪区域的大小百分比zoomLevel: 1,//缩放级别//data: {//只支持四个属性“x”“y”“width”和“height”,默认情况下裁剪区将出现在图像的中心。// x: 420,// y: 50,// width: 100,// height: 100//},preview: .preview,//jQuery选择器预览添加额外的元素,预览区域modal: true,//区分裁剪区和背景dashed: true,//设置裁剪区的方格虚线autoCrop: true,//是否自动显示裁剪区dragCrop: true,//使删除当前裁剪区通过拖动在图像上创建一个新的dashed: true,modal: true,movable: true,//移动裁剪区resizable: true,//调整裁剪区zoomable: true,//放大图片rotatable: true,//旋转图片checkImageOrigin: true,//检查图像的来源如果它是一个跨原产地形象,crossorigin属性将被添加到图像元素使“旋转”和“getdataurl”//maxWidth: 100,//裁剪区//maxHeight: 100,//minWidth: 100,//minHeight: 100,done: function (data) {//区域变化时触发$dataX.val(data.x);$dataY.val(data.y);$dataHeight.val(data.height);$dataWidth.val(data.width);},build: function (e) {//创建裁剪区之前触发},built: function (e) {//创建裁剪区之后触发$image.cropper(zoom, -1);},dragstart: function (e) {//裁剪区移动之前触发},dragmove: function (e) {//裁剪区移动之时触发},dragend: function (e) {//裁剪区移动之后触发}});$(#zoomOut).click(function () {$image.cropper(zoom, -1);});var $inputImage $(#inputImage);if (window.FileReader) {//选择图片$inputImage.change(function () {var fileReader new FileReader(),files this.files,file;if (!files.length) {return;}file files[0];if (/^image\/\w$/.test(file.type)) {fileReader.readAsDataURL(file);fileReader.onload function () {$image.cropper(reset, true).cropper(replace, this.result).css(width,100px);$inputImage.val();};} else {showMessage(请选择图片.);}});} else {$inputImage.addClass(hide);}});//上传代码
$(.upload_point).click(function () {//alert($(.cropper).cropper(getDataURL), type); return false;$(#form_upload).ajaxSubmit({url: /Home/ProcessRequest,type: post,dataType: text,data: { getDataURL: $(.cropper).cropper(getDataURL,{width: 50,height: 50}) },//表示把base64的图片字符格式提交到后台success: function (data) {$(.upload_tag).text(data).css({color:green,display:block});}, error: function () {$(.upload_tag).text(上传异常请刷新或重新登录).css({ color: red, display: block });}});return false;
}); View Code 第三步后台代码 1 [HttpPost]2 public string ProcessRequest(FormCollection f)3 {4 try5 {6 string byteStr f[getDataURL].ToString();//data:image/png;base64, 7 int delLength byteStr.IndexOf(,) 1;8 string str byteStr.Substring(delLength, byteStr.Length - delLength);9 Image returnImage Base64StringToImage(str);
10
11 returnImage.Save(Server.MapPath(/images/head/) Guid.NewGuid() .jpg,
12
13 System.Drawing.Imaging.ImageFormat.Jpeg);
14 }
15 catch (Exception)
16 {
17 return 上传失败;
18 }
19 return 上传成功;
20 }
21 //base64编码的文本 转为 图片
22 private Image Base64StringToImage(string txt)
23 {
24 byte[] arr Convert.FromBase64String(txt);
25 MemoryStream ms new MemoryStream(arr);
26 Bitmap bmp new Bitmap(ms);
27 return bmp;
28 } View Code 转载于:https://www.cnblogs.com/LiuZhen/p/4206295.html
