<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img{
max-width: 400px;
}
.select{
}
</style>
</head>
<body>
<div class="head_img pr">
<em class="pa"></em>
<div class="select">
选择压缩的文件<input id="photo" type="file" accept="image/*" />
</div>
<a href="" download="" id="down">
<img src='' alt="" class="modify_img" />
</a>
</div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$('#photo').change(function(){
var _this = $(this)[0],
_file = _this.files[0],
fileType = _file.type;
console.log(_file.size);
if(/image\/\w+/.test(fileType)){
var fileReader = new FileReader();
fileReader.readAsDataURL(_file);
fileReader.onload = function(event){
var result = event.target.result; //返回的dataURL
var image = new Image();
image.src = result;
image.onload = function(){ //创建一个image对象，给canvas绘制使用
var cvs = document.createElement('canvas');
var scale = 0.8;
if(this.width > 1000 || this.height > 1000){ //1000只是示例，可以根据具体的要求去设定
if(this.width > this.height){
scale = 1000 / this.width;
}else{
scale = 1000 / this.height;
}
}
cvs.width = this.width*scale;
cvs.height = this.height*scale; //计算等比缩小后图片宽高
var ctx = cvs.getContext('2d');
ctx.drawImage(this, 0, 0, cvs.width, cvs.height);
var newImageData = cvs.toDataURL(fileType, 0.8); //重新生成图片，<span style="font-family: Arial, Helvetica, sans-serif;">fileType为用户选择的图片类型</span>
var sendData = newImageData.replace("data:"+fileType+";base64,",'');
$('.modify_img').attr('src',newImageData);
$("#down").attr("href",newImageData);
}
}
}else{
$.notify.show('请选择图片格式文件', {placement: 'center'});
}
});
</script>
</html>
