直接上代碼：（具體看注釋）
需要引用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>
如有問題請指出~