javascript - 更改图像分辨率但保持物理尺寸

Question

是否有可能在客户端更改图像的分辨率(使用 CSS、Javascript 等)但在屏幕上保持其大小？

示例:我想以 200x100 的尺寸显示分辨率为 20x10 的 1920x1080 图像。只需使用 img 元素，将其源和宽度/高度设置为 20x10 肯定可以，但现在我想以 200x100 的大小显示缩放后的图像。

如果不在服务器端生成新图像，是否可以以某种方式实现？

Answer 1

您可以使用 HTML5 Canvas 执行此操作:

给定一张任意大小的原始图像，你想给出大小为 200 x 200 和分辨率为 50 x 50:

1. 制作一张 50 x 50
的 Canvas
2. 使用定义宽度和高度为 50
的参数绘制图像
3. 通过 CSS 放大 Canvas ，将其拉伸(stretch)到 200 x 200。

像这样:http://jsfiddle.net/eGjak/234/ .

作为旁注，就我而言，HTML5 Canvas 在所有浏览器中都使用抗锯齿功能，无法将其关闭。因此，您将得到模糊的结果，而不是像素化的结果。

// paint 200x200 image with resolution 50x50
var w = 200,
    h = 200,
    p = 50,
    q = 50;

var img = $("img").get(0);

img.onload = function() {
    cv.width = p;  // set canvas resolution
    cv.height = q;

    ctx.drawImage(img, 0, 0, p, q); // draw image with given resolution

    cv.style.width = w + "px";  // enlarge canvas by stretching
    cv.style.height = h + "px";
};

img.src = "http://www.lorempixum.com/300/300/";