更改图片分辨率，但保持实际尺寸

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. 放大第e canvas through CSS to stretch it to 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/";