画像の解像度を変更しますが、物理的なサイズを維持してください

Question

（CSS、JavaScriptなどを使用して）クライアント側で画像の解像度を変更する可能性はありますか？

例：200x100のサイズで解像度20x10の1920x1080イメージを表示したいとします。 img要素を使用するだけで、ソースと幅/高さを20x10に設定することは確実ですが、今では200x100のサイズで拡大画像を表示したいと思います。

サーバー側で新しい画像を生成せずに何とかできますか？

Answer 1

あなたはHTML5のキャンバスを使用してこれを行うことができます：あなたは200 X 200の大きさと50 X 50の解像度を提供したい任意のサイズの元画像を考えると

：

1. メイク50 X 50
2. のキャンバスは50
3. 拡大目の幅と高さを定義する引数を持つ画像を描画しますeキャンバス〜CSSを200 x 200に伸ばします。

このように：http://jsfiddle.net/eGjak/234/。

補足として、HTML5キャンバスはすべてのブラウザでアンチエイリアスを使用していますが、これをオフにする機能はありません。そのため、ピクセル化された結果の代わりに、結果がぼやけてしまいます。

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