5.6-团队项目-项目回顾
1、头像上传大小截取问题
头像上传后,若截取大小,则无法进行保存;若不截取大小,则可以进行保存。
System.Drawing.Bitmap
int Width = 200;
int Height = 200;
System.Drawing.Image image;
string FilePath = Server.MapPath("UpFile/") + "woody.jpg";
image = System.Drawing.Bitmap.FromFile(FilePath);
Bitmap Img = new Bitmap(Width, Height);
string newFilePath = Server.MapPath("UpFile/") + "newwoody.jpg";
System.Drawing.Graphics gp = Graphics.FromImage(Img);
Rectangle rl = new Rectangle(0, 0, 200, 200);
gp.DrawImage(image, rl);
Img.Save(newFilePath);
Img.Dispose();
gp.Dispose();
image.Dispose();
2、图片截取插件的版本不匹配问题
function fileSelectHandler() {
// get selected file
var oFile = document.getElementById('image_file').files[0];
// hide all errors
$('.error').hide();
// check for image type (jpg and png are allowed)
var rFilter = /^(image\/jpeg|image\/png)$/i;
if (! rFilter.test(oFile.type)) {
$('.error').html('Please select a valid image file (jpg and png are allowed)').show();
return;
}
// check for file size
if (oFile.size > 2500 * 1024) {
$('.error').html('You have selected too big file, please select a one smaller image file').show();
return;
}
// preview element
var oImage = document.getElementById('preview');
// prepare HTML5 FileReader
var oReader = new FileReader();
oReader.readAsDataURL(oFile);
// oImage.src = null;
oReader.onload = function(e) {
// e.target.result contains the DataURL which we can use as a source of the image
oImage.src = e.target.result;
oImage.onload = function () { // onload event handler
$('.step2').fadeIn(500); //class为step2的显示出来
var sResultFileSize = bytesToSize(oFile.size);
$('#filesize').val(sResultFileSize); //图像大小
$('#filetype').val(oFile.type); //图像类型
$('#filedim').val(oImage.naturalWidth + ' x ' + oImage.naturalHeight); //像素 x * y
// 创建jcrop api和裁剪框的大小
*************************************************************
var jcrop_api, boundx, boundy;//将这里设置为全局变量就可以了
*******************************************************************
// destroy Jcrop if it is existed
if (typeof jcrop_api != 'undefined')
jcrop_api.destroy();
// initialize Jcrop
$('#preview').Jcrop({
minSize: [32, 32], //最小边框大小
aspectRatio : 1, // 裁剪边框的比例
bgFade: true, // 背景特效
bgOpacity: .3, // 背景透明度
onChange: updateInfo, //边框改变事件
onSelect: updateInfo, //边框选择事件
onRelease: clearInfo //边框释放事件
}, function(){
// use the Jcrop API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the Jcrop API in the jcrop_api variable
jcrop_api = this;
});
};
};
// read selected file as DataURL
}