为解决后端生成缩略图的压力，前端可利用HTML5 Canvas元素直接生成不同尺寸的缩略图。本文介绍了通过JavaScript实现图片缩放的核心逻辑，包括获取画布上下文、处理图片加载以及根据指定宽高比调整图像尺寸的方法，并提供在线演示与完整代码供参考。
前端生成缩略图的背景与优势
当前多数网络应用在上传图像时，通常会同时保存多种尺寸的图片，这一过程在专业领域被称为生成缩略图。传统的做法是依赖后端语言（如PHP）来执行生成任务。然而，为了减轻服务器负担，我们可以尝试在前端进行处理，即由前端先生成好不同尺寸的缩略图，再将其传输至后端，后端仅需负责存储前端传来的图片即可。
Canvas生成缩略图的实现代码
借助Canvas技术，我们可以方便地生成各种尺寸的图片。具体的实现方法如下所示：
function resizeImage(src,callback,w,h){
var canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d"),
im = new Image();
w = w || 0,
h = h || 0;
im.onload = function(){
//为传入缩放尺寸用原尺寸
!w && (w = this.width);
!h && (h = this.height);
//以长宽最大值作为最终生成图片的依据
if(w !== this.width || h !== this.height){
var ratio;
if(w>h){
ratio = this.width / w;
h = this.height / ratio;
}else if(w===h){
if(this.width>this.height){
ratio = this.width / w;
h = this.height / ratio;
}else{
ratio = this.height / h;
w = this.width / ratio;
}
}else{
ratio = this.height / h;
w = this.width / ratio;
}
}
//以传入的长宽作为最终生成图片的尺寸
if(w>h){
var offset = (w - h) / 2;
canvas.width = canvas.height = w;
ctx.drawImage(im,0,offset,w,h);
}else if(w<h){
var offset = (h - w) / 2;
canvas.width = canvas.height = h;
ctx.drawImage(im,offset,0,w,h);
}else{
canvas.width = canvas.height = h;
ctx.drawImage(im,0,0,w,h);
}
callback(canvas.toDataURL("image/png"));
}
im.src = src;
}在线演示与源码获取
在线演示地址为：http://demo.jb51.net/js/2020/thumbnail/。演示所用的图片素材截取自我们开发的一款相框制作应用。有兴趣的朋友可以通过相关渠道联系我们，共同交流与探讨。