图片上传缩略图预览

在上传图片进行预览时，直接抓取原图时由于原图过大会影响性能，即对所上传图片进行压缩小图展示；

思路: 利用 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

// 生成base64
dataUrl = 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.result
            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
                }

                // console.log('dx :' + dx, 'dy: ' + dy, 'drawWidth :' + drawWidth, 'thumbnailWidth :' + thumbnailWidth, 'thumbnailHeight :' + thumbnailHeight)
                ctx.drawImage(thumbnailItem, dx, dy, drawWidth, drawHeight, 0, 0, thumbnailWidth, thumbnailHeight)

                // 生成base64
                dataUrl = canvas.toDataURL()

                // thumbnaiUrls.push(dataUrl)
                thumbnaiUrls[i] = dataUrl
                var 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.result

            console.log('缩略图')
            console.log(thumbnaiUrls)

            console.log('原图')
            console.log(imgUrls)

        };
        reader.readAsDataURL(file);
    })
    
})

总结

需要注意 drawImage 需要放在 onload 的回调函数里面，避免图片还未加载完成被绘制出来，即出现图片一片空白;

如有错误或不足，欢迎指出