显示效果如下,点击上传,选择任意图片,压缩到设定的图片大小并显示,压缩后发送给后台。
HTML:
<th align="center" rowspan="4">
<span style="color:red">*</span>照片:<br><input type="file" value="上传" id="selectphoto" style="display:none"><button type="button" class="btn btn-default" onClick="uploadphoto()" style="background-color: #f5f7f8;padding: 2px 4px;margin-right: 9px;">上传</button>
</th>
<td align="center" rowspan="4">
<div id="photo"><img id="viewImg"/> </div>
</td>
JS:
给上传按钮添加事件,激活被隐藏的file类型input控件,选择照片。
//上传照片
function uploadphoto()
{
var fileDialog = $("#selectphoto");
fileDialog.change(function(event){
var filePath = $(this).val(), //获取到input的value,里面是文件的路径
fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
imgBase64 = '', //存储图片的imgBase64
fileObj = document.getElementById("selectphoto").files[0]; //上传文件的对象,要这样写才行,用jquery写法获取不到对象
photoname = fileObj.name;//可以获取文件名称
// 检查是否是图片
if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
alert('上传错误,文件格式必须为:png/jpg/jpeg');
return;
}
// 调用函数,对图片进行压缩
compress(fileObj,function(imgBase64){
imgBase64 = imgBase64; //存储转换的base64编码
globalphoto = imgBase64; //可用于随其它信息一同ajax发送后台
$("#viewImg").attr('src',imgBase64); //显示预览图片
});
})
fileDialog.click();
}
压缩函数用于对图片进行压缩,根据实际布局情况设定画布宽、高之后,不管上传图片大小比例如何,都会按照设置值进行拉伸压缩,会出现图片拉伸或者剪裁的情况:
// 不对图片进行压缩,直接转成base64
function directTurnIntoBase64(fileObj,callback){
var r = new FileReader();
// 转成base64
r.onload = function(){
//变成字符串
imgBase64 = r.result;
console.log(imgBase64);
callback(imgBase64);
}
r.readAsDataURL(fileObj); //转成Base64格式
}
// 对图片进行压缩
function compress(fileObj, callback) {
if ( typeof (FileReader) === 'undefined') {
console.log("当前浏览器内核不支持base64图标压缩");
//调用上传方式不压缩
directTurnIntoBase64(fileObj,callback);
} else {
try {
var reader = new FileReader();
reader.onload = function (e) {
var image = $('<img/>');
image.load(function(){
width = 150, //定义画布的大小,也就是图片压缩之后的像素,可根据实际布局设定大小
height = 180,
canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
imageWidth = 0, //压缩图片的大小
imageHeight = 0,
offsetX = 0,
offsetY = 0,
data = '';
canvas.width = width;
canvas.height = height;
context.clearRect(0, 0, width, height);
if (this.width > this.height) {
imageWidth = Math.round(width * this.width / this.height);
imageHeight = height;
offsetX = - Math.round((imageWidth - width) / 2);
} else {
imageHeight = Math.round(height * this.height / this.width);
imageWidth = width;
offsetY = - Math.round((imageHeight - height) / 2);
}
context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);
var data = canvas.toDataURL('image/jpeg');
//压缩完成执行回调
callback(data);
});
image.attr('src', e.target.result);
};
reader.readAsDataURL(fileObj);
}catch(e){
console.log("压缩失败!");
//调用直接上传方式 不压缩
directTurnIntoBase64(fileObj,callback);
}
}
}