Question

我正在建立一个像flickr或500px这样的网站，我有一个充满照片的页面，我已经用css属性调整了它们，但图像仍处于全分辨率，页面的加载时间需要2分钟即使它被加载它也不会滚动。我需要某种脚本（我无法找到），它将MB中的实际尺寸减少到更低的范围，例如：从3000x4000到300x400

Answer 1

我几天前刚刚处理了同样的问题。

关键是<canvas>元素及其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;
};

使用javascript或jsp缩小图像尺寸

1 个答案: