初学有不当之处，请多多指点，
<body>
<div class="cc">
<input type="file" id="file" onchange="imgChange()" accept="image/*">
</div>
<img src="" id="showImage" alt="">
<!-- <canvas id="canvas" style="display: none;"></canvas> -->
<script>
function imgChange(){
var file = document.getElementById('file').files[0] //获取选择上传的图片文件
var reader = new FileReader() //声明一个新构的FileReader
reader.readAsDataURL(file) //把图片变成base64
reader.onload = function(){
var showImage = document.getElementById('showImage')
if (file.size > 100 * 100) { //判断图片的大小
showImage.src = reader.result //赋值给img选择的图片
showImage.onload = function(){ //当img全部加载完后
var canvas = document.createElement('canvas')//创建canvas对象
canvas.width = this.width //设置画布的宽高和showImage图片的大小一致
canvas.height = this.height
var cgt = canvas.getContext('2d') //设置二维画布环境
cgt.drawImage(this,0,0,canvas.width,canvas.height)
showImage.src = canvas.toDataURL("image/jpeg", 0.4) //改变画布的格式和图片质量
}
}
else{
showImage.src = reader.result
}
}
}
</script>
</body>
最后是把画布重新描绘出的base64路径赋值给img标签的src属性
之所以压缩是在重新描绘画布的过程中，把图片实质的宽高和质量做了改变（而不是单纯标签的的宽高，是图片本身真是的宽高，不知道你们会不会和我一样有这样的误解过！！！）