在日常开发中，想必不少小伙伴有涉及到图片上传的功能，今天我们就来捋一捋上传图片时，如果图片大于规定尺寸，用canvas居中裁剪。
首先我们来熟悉一下canvas的drawImage（）的用法：
drawImage（）向画布上面绘制图片：
这里因为自己曾经掉过这个参数的坑，所以我解释下个别参数
1. width要使用图片的宽度：就是裁剪完成后你想要的图片的宽度
2. height要使用图片的高度：就是裁剪完成后你想要的图片的高度
裁剪主要是要掌握drawImage参数，我们来看一张图理解下drawImage 参数：drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
<input type="file" name="file" id="file" /><canvas id="clipImg" style="border:1px solid red"></canvas>
<script><input type="file" name="file" id="file" /><canvas id="clipImg" style="border:1px solid red"></canvas><script>var eleFile = document.querySelector('#file');// 压缩图片需要的一些元素和对象var reader = new FileReader(), img = new Image();// 选择的文件对象var file = null;var canvas = document.getElementById('clipImg')var context = canvas.getContext('2d');// base64地址图片加载完毕后img.onload = function () {// 图片原始尺寸var originWidth = this.width;var originHeight = this.height;// 最终要裁剪到的尺寸var maxWidth = 120, maxHeight = 120; //裁剪成120*120的大小//目标尺寸 targetWidthvar targetWidth = originWidth, targetHeight = originHeight;// 先取最短边（长或者宽）let xStart, yStart //开始裁剪x轴的坐标，和y轴的坐标if (originWidth > originHeight) {// 判断最短边，因为我们要裁的最终的图片是长宽相等的，所以裁剪时取最短的targetHeight = originHeight;targetWidth = originHeight;xStart = (originWidth - targetWidth) / 2 // 裁剪x轴的坐标,因为是居中裁剪，所以是取中间开始截取yStart = 0} else {targetHeight = originWidth;targetWidth = originWidthxStart = 0yStart = (originWidth - targetWidth) / 2}// 清除画布context.clearRect(0, 0, maxWidth, maxHeight);canvas.width = maxWidthcanvas.height = maxHeightcontext.drawImage(img, xStart,yStart, targetWidth, targetHeight, 0, 0, maxWidth, maxHeight);// canvas转为blob并上传canvas.toBlob(function (blob) {console.log(blob, 'blob')// 转成blob,这里可以ajax上传到后台}, 'image/png');};// 文件base64化，以便获知图片原始尺寸reader.onload = function (e) {img.src = e.target.result;};eleFile.addEventListener('change', function (event) {file = event.target.files[0];// 选择的文件是图片if (file.type.indexOf("image") == 0) {reader.readAsDataURL(file);}});</script>
