caishi
/
trustieplus
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

头像裁剪上传

This commit is contained in:
guange 2017-05-14 15:32:35 +08:00
parent cd977bad3a
commit fce131a402
4 changed files with 109 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/controllers/avatar_controller.rb
View File

@ -11,9 +11,24 @@ class AvatarController < ApplicationController
@source_type = params[:source_type]
@source_id = params[:source_id]
@temp_file = params[:img] || params[:avatar][:image]
@image_file = @temp_file.original_filename
if @temp_file.respond_to?(:original_filename)
@image_file = @temp_file.original_filename
#image_file.force_encoding("UTF-8") if filename.respond_to?(:force_encoding)
else
@image_file=params[:filename]
end
@is_direct = params[:is_direct]
@auth_type = params[:auth_type]
#base64转换
img_base64_head = 'data:image/jpeg;base64,'
if @temp_file && @temp_file.start_with?(img_base64_head)
@temp_file = StringIO.new(Base64.decode64(@temp_file[img_base64_head.size,@temp_file.size-img_base64_head.size]))
end
else
unless request.raw_post.nil?
@source_type = params[:source_type]
@ -33,6 +48,8 @@ class AvatarController < ApplicationController
end
end
size = @temp_file.size
if @temp_file && (@temp_file.size > 0)
if @temp_file.size > Setting.upload_avatar_max_size.to_i
@ -85,6 +102,7 @@ class AvatarController < ApplicationController
else
@status = 2
@msg = l(:not_valid_image_file)
logger.error "上传失败: "+@msg
end
end
@temp_file = nil

134
app/views/account/avatar.html.erb
View File

@ -69,68 +69,88 @@
</div>
<script>
$(function () {
new CropAvatar($('#crop-avatar'), 1/1);
//---------------------------头像上传-----------------------------//
//做个下简易的验证 大小 格式
$('#avatarInput').on('change', function(e) {
var filemaxsize = 1024 * 5;//5M
var target = $(e.target);
var Size = target[0].files[0].size / 1024;
if(Size > filemaxsize) {
alert('图片过大，请重新选择!');
$(".avatar-wrapper").children().remove;
return false;
}
if(!this.files[0].type.match(/image.*/)) {
alert('请选择正确的图片!')
} else {
var filename = document.querySelector("#avatar-name");
var texts = document.querySelector("#avatarInput").value;
var teststr = texts; //你这里的路径写错了
testend = teststr.match(/[^\\]+\.[^\(]+/i); //直接完整文件名的
filename.innerHTML = testend;
$(filename).css("color", '#333');
}
//---------------------------头像上传-----------------------------//
//做个下简易的验证 大小 格式
$('#avatarInput').on('change', function(e) {
var filemaxsize = 1024 * 5;//5M
var target = $(e.target);
var Size = target[0].files[0].size / 1024;
if(Size > filemaxsize) {
alert('图片过大，请重新选择!');
$(".avatar-wrapper").children().remove;
return false;
}
if(!this.files[0].type.match(/image.*/)) {
alert('请选择正确的图片!')
} else {
var filename = document.querySelector("#avatar-name");
var texts = document.querySelector("#avatarInput").value;
var teststr = texts; //你这里的路径写错了
testend = teststr.match(/[^\\]+\.[^\(]+/i); //直接完整文件名的
filename.innerHTML = testend;
$(filename).css("color", '#333');
}
});
});
$(".avatar-save").on("click", function() {
var img_lg = document.getElementById('imageHead');
if($(img_lg).html().trim() == ""){
$("#avatar-name").html("请先选择图片上传").css("color", 'red');
} else {
$("#avatar-name").html("").css("color", '#333');
// 截图小的显示框内的内容
html2canvas(img_lg, {
allowTaint: true,
taintTest: false,
onrendered: function(canvas) {
canvas.id = "mycanvas";
//生成base64图片数据
var dataUrl = canvas.toDataURL("image/jpeg");
var newImg = document.createElement("img");
newImg.src = dataUrl;
imagesAjax(dataUrl);
$(".avatar-save").attr("disabled","true");
$(".avatar-save").on("click", function() {
var img_lg = document.getElementById('imageHead');
if($(img_lg).html().trim() == ""){
$("#avatar-name").html("请先选择图片上传").css("color", 'red');
} else {
$("#avatar-name").html("").css("color", '#333');
// 截图小的显示框内的内容
html2canvas(img_lg, {
allowTaint: true,
taintTest: false,
onrendered: function(canvas) {
canvas.id = "mycanvas";
//生成base64图片数据
var dataUrl = canvas.toDataURL("image/jpeg");
var newImg = document.createElement("img");
newImg.src = dataUrl;
imagesAjax(dataUrl);
$(".avatar-save").attr("disabled","true");
}
});
}
});
function imagesAjax(src) {
var data = {};
data.img = src;
data.source_id = $('#source_id').val();
data.source_type = $('#source_type').val();
data.is_direct = 0;
$.ajax({
url: "<%= upload_avatar_path() %>",
beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
data: data,
type: "POST",
success: function (re) {
console.log(re);
if(re){
var o = JSON.parse(re);
if (o.status !=0 ){
alert(o.message);
} else {
alert('上传成功');
window.location.reload();
}
} else {
alert("上传出错");
}
},
error: function (e) {
alert(e);
}
});
}
});
})
function imagesAjax(src) {
var data = {};
data.img = src;
data.source_id = $('#source_id').val();
data.source_type = $('#source_type').val();
data.is_direct = 0;
$.ajax({
url: "<%= upload_avatar_path() %>",
beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
data: data,
type: "POST",
success: function (re) {
}
});
}
</script>

4
app/views/layouts/base_edu_account.html.erb
View File

@ -1,5 +1,5 @@
<!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">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title><%= h html_title %></title>

80
public/head/sitelogo.js
View File

@ -15,7 +15,13 @@
log: function() {}
};
function CropAvatar($element) {
/**
* 图片裁剪
* @param $element
* @param aspectRatio 支持等比 1 4/3 16/9
* @constructor
*/
function CropAvatar($element, aspectRatio) {
this.$container = $element;
this.$avatarView = this.$container.find('.avatar-view');
@ -34,6 +40,8 @@
this.$avatarWrapper = this.$avatarModal.find('.avatar-wrapper');
this.$avatarPreview = this.$avatarModal.find('.avatar-preview');
this.$aspectRatio = aspectRatio;
this.init();
}
@ -197,7 +205,7 @@
this.$img = $('<img src="' + this.url + '">');
this.$avatarWrapper.empty().html(this.$img);
this.$img.cropper({
aspectRatio: 1,
aspectRatio: _this.$aspectRatio,
preview: this.$avatarPreview.selector,
strict: false,
// crop: function(data) {
@ -224,49 +232,6 @@
}
},
// ajaxUpload: function() {
// var url = this.$avatarForm.attr('action'),
// data = new FormData(this.$avatarForm[0]),
// _this = this;
//
// $.ajax(url, {
// headers: {
// 'X-XSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
// },
// type: 'post',
// data: data,
// dataType: 'json',
// processData: false,
// contentType: false,
//
// beforeSend: function() {
// _this.submitStart();
// },
//
// success: function(data) {
// _this.submitDone(data);
// },
//
// error: function(XMLHttpRequest, textStatus, errorThrown) {
// if (this.uploaded) {
// this.uploaded = false;
// this.cropDone();
// // this.uploaded = true;this.support.datauri ||
// // this.$avatarSrc.val(this.url);
// // this.startCropper();
// } else {
// this.uploaded = true;
// this.$avatarSrc.val(this.url);
// this.startCropper();
// this.cropDone();
// }
// },
//
// complete: function() {
// _this.submitEnd();
// }
// });
// },
syncUpload: function() {
this.$avatarSave.click();
@ -276,27 +241,6 @@
this.$loading.fadeIn();
},
// submitDone: function(data) {
// if($.isPlainObject(data)) {
// if(data.result) {
// this.url = data.result;
// if(this.support.datauri || this.uploaded) {
// this.uploaded = false;
// this.cropDone();
// } else {
// this.uploaded = true;
// this.$avatarSrc.val(this.url);
// this.startCropper();
// }
// this.$avatarInput.val('');
// } else if(data.message) {
// this.alert(data.message);
// }
// } else {
// this.alert('Failed to response');
// }
// },
submitFail: function(msg) {
this.alert(msg);
},
@ -324,8 +268,6 @@
}
};
$(function() {
return new CropAvatar($('#crop-avatar'));
});
window.CropAvatar = CropAvatar;
});