更改圖片分辨率，但保持實際尺寸

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/";