使用javascript或jsp缩小图像大小

我正在建立一个像flickr或500px这样的网站，我有一个满是照片的页面，我用css属性调整了它们的大小，但是图像仍然是全分辨率的，页面的加载时间大约需要2分钟，即使加载了也不会滚动。我需要某种脚本（我找不到），它可以将实际尺寸（MB）降低到更低的值，例如从3000x4000降低到300x400

关键是

元素及其

drawImage

方法

下面是我编写的函数。它将输入图像缩放到目标宽度，但它应该很容易适应，以最大宽度或高度、比率或其他任何参数作为参数

var scaleToWidth = function (img, targetWidth) {
    /* take in an HTMLImageElement (<img>)
     ouput a HTMLCanvasElement (<canvas>)    */

    var w = img.naturalWidth;
    var h = img.naturalHeight;

    var targetHeight = targetWidth * (h / w);

    var interimCanvas    = document.createElement('canvas');
    interimCanvas.width  = w;
    interimCanvas.height = h;
    var interimCtx       = interimCanvas.getContext('2d');
    var redrawnCanvas, redrawnCtx;
    var i                = 2;
    var newWidth, newHeight;

    redrawnCanvas        = document.createElement('canvas');
    redrawnCanvas.width  = targetWidth;
    redrawnCanvas.height = targetHeight;
    redrawnCtx           = redrawnCanvas.getContext('2d');

    if (w > targetWidth) {

        /* we do multiple passes, each time scaling the image by half.
         For some reason, this gives a smoother result than scaling directly
         to target size.
         We stop when halving once more would bring us below the target size.
         */

        interimCtx.drawImage(img, 0, 0);

        do {
            redrawnCanvas                    = document.createElement('canvas');
            newWidth                         = interimCanvas.width / 2;
            newHeight                        = interimCanvas.height / 2;
            redrawnCanvas.width              = newWidth;
            redrawnCanvas.height             = newHeight;
            redrawnCtx                       = redrawnCanvas.getContext('2d');
            redrawnCtx.imageSmoothingEnabled = true;
            redrawnCtx.drawImage(interimCanvas, 0, 0, newWidth, newHeight);
            interimCanvas = redrawnCanvas;
            i++;
        } while (interimCanvas.width / targetWidth > 2);
        //final scalling to target width
        redrawnCanvas        = document.createElement('canvas');
        redrawnCanvas.width  = targetWidth;
        redrawnCanvas.height = targetHeight;
        redrawnCtx           = redrawnCanvas.getContext('2d');
        redrawnCtx.drawImage(interimCanvas, 0, 0, targetWidth, targetHeight);
    } else {
        redrawnCtx.drawImage(img, 0, 0, targetWidth, targetHeight);
    }

    return redrawnCanvas;
};

var scaleToWidth=函数（img，targetWidth）{
/*接受一个HTMLImageElement（）
输出HTMLCanvasElement（）*/
var w=img.自然宽度；
var h=平均自然高度；
var targetHeight=targetWidth*（高/宽）；
var interimCanvas=document.createElement（'canvas'）；
interimCanvas.width=w；
interimCanvas.height=h；
var interimCtx=interimCanvas.getContext（'2d'）；
var重绘NCANVAS，重绘NCTX；
var i=2；
var newWidth，newHeight；
redrawnCanvas=document.createElement（'canvas'）；
重绘nCanvas.width=targetWidth；
重绘nCanvas.height=目标光；
redrawnCtx=redrawnCanvas.getContext（'2d'）；
如果（w>目标宽度）{
/*我们进行多次扫描，每次将图像缩放一半。
由于某些原因，这会比直接缩放得到更平滑的结果
到目标大小。
当再次减半将使我们低于目标规模时，我们停止。
*/
interimCtx.drawImage（img，0，0）；
做{
redrawnCanvas=document.createElement（'canvas'）；
newWidth=interimCanvas.width/2；
newHeight=interimCanvas.height/2；
重绘ncanvas.width=新宽度；
重绘ncanvas.height=新高度；
redrawnCtx=redrawnCanvas.getContext（'2d'）；
重画nctx.imageSmoothingEnabled=真；
重画nctx.drawImage（interimCanvas，0，0，newWidth，newHeight）；
interimCanvas=重新绘制的nCanvas；
i++；
}while（interimCanvas.width/targetWidth>2）；
//最终缩放到目标宽度
redrawnCanvas=document.createElement（'canvas'）；
重绘nCanvas.width=targetWidth；
重绘nCanvas.height=目标光；
redrawnCtx=redrawnCanvas.getContext（'2d'）；
重绘nctx.drawImage（interimCanvas，0，0，targetWidth，targetSight）；
}否则{
重绘nctx.drawImage（img，0，0，targetWidth，targetSight）；
}
返回重新绘制的NCANVAS；
};

不清楚您想要的是客户端解决方案还是服务器端解决方案。它必须是服务器端解决方案。如果他在客户端这样做，那么这将是毫无意义的@OP我建议您提及您用作标记的服务器语言。我目前正在使用jsp请参考：。您可以使用BuffereImage类创建照片的缩略图版本，并让页面加载它们，而不是完整大小的原始照片。如果你愿意的话，我可以说得更具体一些。我如何使用这个，我对java不是很熟悉