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

Question

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

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

如果没有在服务器端生成新图像，这种方式是否可行？

Answer 1

您可以使用HTML5画布执行此操作：

根据您要提供200 x 200大小且分辨率为50 x 50的任何尺寸的原始图片：

1. 制作50 x 50
的画布
2. 使用定义50
的宽度和高度的参数绘制图像
3. 将画布通过CSS 放大，将其拉伸至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/";