图片上传剪裁插件cropper,支持剪裁,前台展示,缩小,扩大..._CSDN博客

来自 : CSDN技术社区 发布时间：2021-03-25

//生成结果canvas,这里决定图片保存的高宽 var croppedCanvas this.$img.cropper( getCroppedCanvas , { width: this.opts.width, height: this.opts.height var result null;//要返回的最后结果 var encoderOptions 0.8;//图片保存质量 //如果是base64格式 那么获取源文件类型进行保存,否则图片默认保存为jpeg result croppedCanvas.toDataURL( image/png , encoderOptions); //url可以写死 也可以自己定义 var url this.$avatarForm.attr( action var data new FormData(this.$avatarForm[0]); var _this this; data.append( imgBase64 , result); data.append( moduleName , this.opts.mName);//自己上传阿里云 或者本地服务器 $.ajax(url, { type: post , data: data, dataType: json , processData: false, contentType: false, beforeSend: function () { _this.submitStart();//上传成功后 返回的data就是成功后的地址 可以根据data调用的事件再前台显示出来 success: function (data) { _this.submitDone(data); error: function (XMLHttpRequest, textStatus, errorThrown) { _this.submitFail(textStatus || errorThrown); complete: function () { _this.submitEnd(); syncUpload: function () { this.$avatarSubmit.click(); submitStart: function () { this.$loading.fadeIn();//成功后调用的事件//这边可以直接把成功后的图片显示 submitDone: function (data) { if (data) { if (this.opts.success typeof this.opts.success function ) this.url data; if (this.support.datauri || this.uploaded) { this.uploaded false; if (this.url) { this.opts.success(this.url); this.cropDone(); else { this.uploaded true; this.$avatarSrc.val(this.url); this.startCropper(); this.$avatarInput.val( else { this.alert( 请写回调函数 else { this.alert( 上传失败 submitFail: function (msg) { if (this.opts.error typeof this.opts.error function ) { this.opts.error(); } else { this.alert(msg); submitEnd: function () { this.$loading.fadeOut(); cropDone: function () { this.$avatarForm.get(0).reset(); this.$avatar.attr( src , this.url); this.stopCropper(); this.$avatarModal.modal( hide alert: function (msg) { var $alert [ div class alert alert-danger avatar-alert alert-dismissable , button type button class close data-dismiss alert × /button , msg, /div ].join( this.$avatarUpload.after($alert); return CropAvatar;//这段是初始化 前边再页面jQuery已经写过上传 这句话就不需要了 没写的话可以直接初始化调用 //$(function () { // return new CropAvatar($( #crop-avatar //});

C#后台上传本地