在上传图片进行预览时，直接抓取原图时由于原图过大会影响性能，即对所上传图片进行压缩小图展示；
思路: 利用 canvas 对原图进行压缩重绘，抓取区域以中心为基点最大范围绘制缩略图；
对input[file]进行事件绑定
// 监控 file 变化imgfile.addEventListener('change', function () {...}
利用 FileReader 读取上传的图片
var reader = new FileReader()reader.onload = function () {...}reader.readAsDataURL(file);
创建 canvas、image，并获取宽高
var canvas = document.createElement('canvas');// 设置 canvas 画布大小canvas.width = thumbnailWidth, canvas.height = thumbnailHeight;var ctx = canvas.getContext("2d");var thumbnailItem = new Image();//获取图片宽高thumbnailItem.onload = function () {var imgWidth = this.width,imgHeight = this.height,drawWidth = '',drawHeight = '',dx,dy;}
对原图进行宽高分析，最大化展示原图区域
// 判断原图宽高if (imgWidth > imgHeight) {drawWidth = drawHeight = imgHeight;dx = (imgWidth - imgHeight) / 2, dy = 0} else {drawWidth = drawHeight = imgWidth;dx = 0, dy = (imgHeight - imgWidth) / 2}
进行绘制缩略图
//void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);ctx.drawImage(thumbnailItem, dx, dy, drawWidth, drawHeight, 0, 0, thumbnailWidth, thumbnailHeight)//dx//目标画布的左上角在目标canvas上 X 轴的位置。//dy//目标画布的左上角在目标canvas上 Y 轴的位置。//dWidth//在目标画布上绘制图像的宽度。 允许对绘制的图像进行缩放。 如果不说明， 在绘制时图片宽度不//会缩放。//dHeight//在目标画布上绘制图像的高度。 允许对绘制的图像进行缩放。 如果不说明， 在绘制时图片高度不//会缩放。//sx//需要绘制到目标上下文中的，源图像的矩形选择框的左上角 X 坐标。//sy//需要绘制到目标上下文中的，源图像的矩形选择框的左上角 Y 坐标。//sWidth//需要绘制到目标上下文中的，源图像的矩形选择框的宽度。如果不说明，整个矩形从坐标的sx和sy开//始，到图像的右下角结束。//sHeight//需要绘制到目标上下文中的，源图像的矩形选择框的高度。
生成base64
// 生成base64dataUrl = canvas.toDataURL()
核心代码
// 监控 file 变化imgfile.addEventListener('change', function () {if (!this.files.length) return;var files = Array.prototype.slice.call(this.files);if (files.length > maxQuantity) {alert("最多同时只可上传100张图片");return;}files.forEach(function (file, i) {var reader = new FileReader(),dataUrl = '';reader.onload = function () {var canvas = document.createElement('canvas');// 设置 canvas 画布大小canvas.width = thumbnailWidth, canvas.height = thumbnailHeight;var ctx = canvas.getContext("2d");var thumbnailItem = new Image();// 添加原图 url 至数组// imgUrls.push(this.result);imgUrls[i] = this.resultthumbnailItem.onload = function () {var imgWidth = this.width,imgHeight = this.height,drawWidth = '',drawHeight = '',dx,dy;// 判断原图宽高if (imgWidth > imgHeight) {drawWidth = drawHeight = imgHeight;dx = (imgWidth - imgHeight) / 2, dy = 0} else {drawWidth = drawHeight = imgWidth;dx = 0, dy = (imgHeight - imgWidth) / 2}// console.log('dx :' + dx, 'dy: ' + dy, 'drawWidth :' + drawWidth, 'thumbnailWidth :' + thumbnailWidth, 'thumbnailHeight :' + thumbnailHeight)ctx.drawImage(thumbnailItem, dx, dy, drawWidth, drawHeight, 0, 0, thumbnailWidth, thumbnailHeight)// 生成base64dataUrl = canvas.toDataURL()// thumbnaiUrls.push(dataUrl)thumbnaiUrls[i] = dataUrlvar imglist ='<div class="sn-file-item sn-thumbnail">' +'<input type="checkbox" name="sel" class="sn-thumbnail-sel">' +'<img src=' + dataUrl + ' data-index=' + i + '>' +'<div class="sn-thumbnail-hidebar"><span class="am-icon-trash js-thumbnail-del" data-index=' + i + ' data-name = "del"></span></div>' +'</div>';$('#imgList').append(imglist)}thumbnailItem.src = this.resultconsole.log('缩略图')console.log(thumbnaiUrls)console.log('原图')console.log(imgUrls)};reader.readAsDataURL(file);})})
总结
需要注意 drawImage 需要放在 onload 的回调函数里面，避免图片还未加载完成被绘制出来，即出现图片一片空白;
如有错误或不足，欢迎指出
