直接上代码：（具体看注释）
需要引用jquery.min.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>压缩图片</title>
</head>
<body>
<input type="file" name="file" id="file">
<div id="container"></div>
<script src="../jquery-3.3.1.min.js"></script>
<script>
$(function(){
$("#file").on("change",function(){
var file = this.files[0]
photoCompress(file, 200, $("#container")[0])
})
})
/**@argument
* file:文件（图片形式）
* w：文件压缩后的宽度
* objDiv：容器或者回调函数
**/
function photoCompress(file, w, objDiv){
var ready = new FileReader() // 异步文件读取机制
ready.readAsDataURL(file) // 图片预览
ready.onload = function(){
var re = this.result
canvasDataURL(re, w, objDiv)
}
}
function canvasDataURL(re, w, objDiv){
var newImg = new Image()
newImg.src = re
var imgWidth,
imgHeight
offsetX = 0,
offsetY = 0
// img的onload事件中同步执行绘制图像的函数，就可以一边装载一边绘制了
newImg.onload = function(){
var img = document.createElement("img")
img.src = newImg.src
imgWidth = img.width
imgHeight = img.height
var newHeight = Math.round(imgHeight * w / imgWidth) // 按比例计算压缩后的图片高度
var canvas = document.createElement("canvas")
canvas.width = w
canvas.height = newHeight
var ctx = canvas.getContext('2d')
// clearRect(x,y,width,height)
// 参数说明：x、y矩形起点的横纵坐标，width、height表示矩形宽高
ctx.clearRect(0,0,w,newHeight)
// 重置图片宽高为压缩后的宽高
imgWidth = w
imgHeight = newHeight
// drawImage(image,x,y,w,h)
// 参数说明：image-Image对象，x、y是绘制时该图像在画布中的起始坐标。w、h表示绘制时图像的宽高
// 该方法也可以复制图片某个区域：drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
// 参数说明：image-Image对象，sx、sy是复制源图像中被复制区域的起点横纵坐标，sw、sh时候被复制区域的宽高
// dx、dy是表示复制后的目标图像在画布中的起始横纵坐标，dw，dh是复制后的目标图像的宽高
ctx.drawImage(img,offsetX,offsetY,imgWidth,imgHeight)
/*******************start复制局部区域放大(需要把画布宽高都增加200) *************/
// ctx.drawImage(img,360,390,800,400,imgWidth,0,150,100)
/*********************************** end **********************************/
/*******************************start像素处理 *******************************/
// 像素处理：下面定义的imagedata其实是一个CanvasPixelArray对象，具有height、width、data等属性。
// data属性是一个保存像素数据的数组，每四个为一组，按顺序分别表示：红色值，绿色值，蓝色值，透明度值。
// var imgdata = ctx.getImageData(0,0,imgWidth,imgHeight)
// var imgdataArr = imgdata.data
// var imgdataLen = imgdataArr.length
// console.log(imgdataArr)
// for(var i = 0; i < imgdataLen; i += 4){
// imgdataArr[i] = 255 - imgdataArr[i] // red
// imgdataArr[i+1] = 255 - imgdataArr[i+1] // green
// imgdataArr[i+2] = 255 - imgdataArr[i+2] // blue
// }
// ctx.putImageData(imgdata,0,0) // 重置像素值后重绘图像：参数分别表示：imgdata-像素组，重绘图像的起点横纵坐标
/*********************************** end **********************************/
var base64 = canvas.toDataURL('img/png',0.7) // 参数表示：指定的图片类型，图片质量
if(typeof objDiv === 'object'){
objDiv.appendChild(canvas)
// console.log(base64)
} else if(typeof objDiv === 'function'){
objDiv(base64)
}
}
}
</script>
</body>
</html>
如有问题请指出~