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

}