jquery头像上传剪裁插件cropper的前后台demo
程序员文章站
2024-01-10 20:53:10
因为一个项目要做一个头像上传的功能，因此选择了使用jquery的头像插件cropper，cropper是一款使用简单且功能强大的图片剪裁jQuery插件，但是在使用的时候，有一个很大的坑需要注意，那就是当上传的文件不需要转换成base64传输给后台的时候，使用FormData对象异步上传的时候，需要 ......
因为一个项目要做一个头像上传的功能，因此选择了使用jquery的头像插件cropper，cropper是一款使用简单且功能强大的图片剪裁jquery插件，但是在使用的时候，有一个很大的坑需要注意，那就是当上传的文件不需要转换成base64传输给后台的时候，使用formdata对象异步上传的时候，需要加上两个参数为false，此外还给除了两种上传头像的方式，一种直接上传到文件服务器，类似<input type="file" name="file"> 还有一种是将图片进行base64，在后台解密转换成图片。
contenttype: false,
processdata: false,
1.不进行base64转换直接上传后台
页面显示
<div class="up-img-cover" id="up-img-touch" >
<img class="img-thumbnail" alt="点击图片上传" src="img/hu.jpg" th:src="${user.avatar}"
data-am-popover="{position:'left',content: '点击上传', trigger: 'hover focus'}" >
<div style="background:#f8f8ff;width:180px;position:absolute;height:26px;top:100px;left:24px;z-index: 2;text-align: center;opacity:0.8;" >
<span>修改头像</span>
</div>
</div>
此外附上代码（这里直接给出custom_up_img.js）的前端代码:
$(document).ready(function(){
$("#up-img-touch").click(function(){
$("#doc-modal-1").modal({width:'600px'});
});
});
$(function() {
'use strict';
// 初始化
var $image = $('#image');
$image.cropper({
aspectratio: '1',
autocroparea:0.8,
preview: '.up-pre-after',
});
// 事件代理绑定事件
$('.docs-buttons').on('click', '[data-method]', function() {
var $this = $(this);
var data = $this.data();
var result = $image.cropper(data.method, data.option, data.secondoption);
switch (data.method) {
case 'getcroppedcanvas':
if (result) {
// 显示 modal
$('#cropped-modal').modal().find('.am-modal-bd').html(result);
$('#download').attr('href', result.todataurl('image/jpeg'));
}
break;
}
});
// 上传图片
var $inputimage = $('#inputimage');
var url = window.url || window.webkiturl;
var bloburl;
if (url) {
$inputimage.change(function () {
var files = this.files;
var file;
if (files && files.length) {
file = files[0];
if (/^image\/\w+$/.test(file.type)) {
bloburl = url.createobjecturl(file);
$image.one('built.cropper', function () {
// revoke when load complete
url.revokeobjecturl(bloburl);
}).cropper('reset').cropper('replace', bloburl);
$inputimage.val('');
} else {
window.alert('请选择图片！！！');
}
}
// amazi ui 上传文件显示代码
var filenames = '';
$.each(this.files, function() {
filenames += '<span class="am-badge">' + this.name + '</span> ';
});
$('#file-list').html(filenames);
});
} else {
$inputimage.prop('disabled', true).parent().addclass('disabled');
}
//绑定上传事件
$('#up-btn-ok').on('click',function(){
var $modal = $('#my-modal-loading');
var $modal_alert = $('#my-alert');
var img_src=$image.attr("src");
if(img_src==""){
set_alert_info("没有选择上传的图片");
$modal_alert.modal();
return false;
}
$modal.modal();
$("#image").cropper('getcroppedcanvas').toblob(function(blob){
var formdata = new formdata(); //这里创建formdata()对象
formdata.append('file', blob); //给表单对象中添加一个name为file的文件 blod是这个插件选择文件后返回的文件对象
console.log(blob);
$.ajax({
url:"http://localhost:8081/file/upload", //这里我上传的是我自己开源的一个文件服务器 github地址:https://github.com/admin1024admin/fileserver.git
type: "post",
data: formdata,
contenttype: false, //这里需要注意
processdata: false,
success: function(data, textstatus){
$modal.modal('close');
set_alert_info(data.result);
$modal_alert.modal();
if(data.result=="ok"){
$("#up-img-touch img").attr("src",data.file);
var img_name=data.file.split('/')[2];
console.log(img_name);
alert("ok");
//异步更新头像地址
$.ajax({
url:"/space/"+url+"/updataavatar",
type:"post",
data:{"imgurl":data.file},
success:function (data) {
if(data=="ok"){
window.location.reload();
}
},
error:function () {
alert("更新失败");
}
})
window.location.reload();
}
},
error: function(){
$modal.modal('close');
set_alert_info("上传头像失败了！");
$modal_alert.modal();
//console.log('upload error');
}
});
})
});
});
function rotateimgright() {
$("#image").cropper('rotate', 90);
}
function rotateimgleft() {
$("#image").cropper('rotate', -90);
}
function set_alert_info(content){
$("#alert_content").html(content);
}
后台代码:基于springboot
/**
* 博客头像上传
* @param file
* @return
*/
@postmapping("/file/upload")
@responsebody
public map<string,object> handlefileupload(@requestparam("file") multipartfile file) {
file returnfile = null;
map<string,object> map = new hashmap<string,object>();
try {
file f = new file(file.getoriginalfilename(), file.getcontenttype(), file.getsize(),file.getbytes()); //需要注意，这里的file对象是我自定义的模型类。并非java.io.file对象
f.setmd5( md5util.getmd5(file.getinputstream()) );
returnfile = fileservice.savefile(f);
returnfile.setpath("http://localhost:8080/file/view/"+f.getid());
returnfile.setcontent(null) ;
map.put("result","ok");
map.put("file","http://localhost:8081/file/view/"+f.getid());
return map;
} catch (ioexception | nosuchalgorithmexception ex) {
ex.printstacktrace();
map.put("result","no");
map.put("message",ex.getmessage());
return map;
}
}
2.转换成base64后传给后台，在后台解码保存图片
前端代码:
$(document).ready(function(){
$("#up-img-touch").click(function(){
$("#doc-modal-1").modal({width:'600px'});
});
});
$(function() {
'use strict';
// 初始化
var $image = $('#image');
$image.cropper({
aspectratio: '1',
autocroparea:0.8,
preview: '.up-pre-after',
});
// 事件代理绑定事件
$('.docs-buttons').on('click', '[data-method]', function() {
var $this = $(this);
var data = $this.data();
var result = $image.cropper(data.method, data.option, data.secondoption);
switch (data.method) {
case 'getcroppedcanvas':
if (result) {
// 显示 modal
$('#cropped-modal').modal().find('.am-modal-bd').html(result);
$('#download').attr('href', result.todataurl('image/jpeg'));
}
break;
}
});
// 上传图片
var $inputimage = $('#inputimage');
var url = window.url || window.webkiturl;
var bloburl;
if (url) {
$inputimage.change(function () {
var files = this.files;
var file;
if (files && files.length) {
file = files[0];
if (/^image\/\w+$/.test(file.type)) {
bloburl = url.createobjecturl(file);
$image.one('built.cropper', function () {
// revoke when load complete
url.revokeobjecturl(bloburl);
}).cropper('reset').cropper('replace', bloburl);
$inputimage.val('');
} else {
window.alert('请选择图片！！！');
}
}
// amazi ui 上传文件显示代码
var filenames = '';
$.each(this.files, function() {
filenames += '<span class="am-badge">' + this.name + '</span> ';
});
$('#file-list').html(filenames);
});
} else {
$inputimage.prop('disabled', true).parent().addclass('disabled');
}
//绑定上传事件
$('#up-btn-ok').on('click',function(){
var $modal = $('#my-modal-loading');
var $modal_alert = $('#my-alert');
var img_src=$image.attr("src");
if(img_src==""){
set_alert_info("没有选择上传的图片");
$modal_alert.modal();
return false;
}
$modal.modal();
var url=$(this).attr("imgurl");
var canvas=$("#image").cropper('getcroppedcanvas'); //获取到图片转换成的canvas对象
var data=canvas.todataurl(); //将图片转成base64
$.ajax({
url:"http://localhost:8081/file/upload",
type: "post",
data: {"img":data.tostring}, //这里传递参数给后台
success: function(data, textstatus){
$modal.modal('close');
set_alert_info(data.result);
$modal_alert.modal();
if(data.result=="ok"){
$("#up-img-touch img").attr("src",data.file);
var img_name=data.file.split('/')[2];
console.log(img_name);
alert("ok");
window.location.reload();
}
},
error: function(){
$modal.modal('close');
set_alert_info("上传头像失败了！");
$modal_alert.modal();
//console.log('upload error');
}
});
});
});
function rotateimgright() {
$("#image").cropper('rotate', 90);
}
function rotateimgleft() {
$("#image").cropper('rotate', -90);
}
function set_alert_info(content){
$("#alert_content").html(content);
}
后台base64解码代码:
/**
* 头像上传
*/
@postmapping("/{username}/avatar")
@responsebody
public map<string,object> uploadavatar(@requestparam("image")string image){
string imgbase64 = image.replace("data:image/png;base64,","");
boolean b = generateimage(imgbase64);
system.out.println("保存成功---->"+b);
map<string,object> map = new hashmap<string,object>();
map.put("result","ok");
map.put("file","图片路径");
return map;
}
//base64字符串转化成图片
public boolean generateimage(string imgstr){
//对字节数组字符串进行base64解码并生成图片
if (imgstr == null) { //图像数据为空
return false;
}
try{
base64decoder decoder = new base64decoder();
// base64解码
byte[] b = decoder.decodebuffer(imgstr);
for(int i=0;i<b.length;++i)
{
if(b[i]<0){//调整异常数据
b[i]+=256;
}
}
//生成jpeg图片
string imgfilepath = "d:\\images\\new.jpg";//新生成的图片
outputstream out = new fileoutputstream(imgfilepath);
out.write(b);
out.flush();
out.close();
return true;
}
catch (exception e){
return false;
}
}