像素尺寸的兩倍

我剛爲我的項目http://i.imgur.com/9FLj6Uk.png創建了小像素藝術品。我想在我的網站上使用它。正如你所看到的，它是小像素藝術。我想要一個像素繪製爲2 * 2像素而不是1 * 1像素。我會使用2 * 2像素而不是一個來重繪圖片，但這似乎是不好的解決方案。像素尺寸的兩倍

我想它

img.pixel { 
    width: 32px; 
    height: 32px 
}

但不起作用使用CSS，它顯示在瀏覽器奇怪的陰影。我想看看硬像素。有誰知道這個問題的任何解決方案？

This is the problem when I use the CSS above 這是問題，當我使用上面

來源

2013-10-11 Kyrbi

瀏覽器是不是圖像編輯器，你爲什麼會想到他們做的飛行放大圖像的好工作呢？ – cimmanon

像素藝術在瀏覽器中非常困難，主要是由於缺乏通用瀏覽器支持「像素化」或「清晰邊緣」的圖像渲染。它應該是supported in CSS4。

目前CSS堆棧看起來是這樣，但它看起來好像Chrome的30和Opera 16已經打破了CSS解決方案的支持

image-rendering:optimizeSpeed; 
image-rendering:-moz-crisp-edges; 
image-rendering:-o-crisp-edges; 
image-rendering:optimize-contrast; 
image-rendering:-webkit-optimize-contrast; 
-ms-interpolation-mode: nearest-neighbor;

見this answer通過@Phrogz，用test case。另見mozilla's documentation關於這個問題。現在普遍支持，一個JS的解決方案可能要暫時比如這裏看到的大文章drawing pixels is hard工作：

var resize = function(img, scale) { 
// Takes an image and a scaling factor and returns the scaled image 

// The original image is drawn into an offscreen canvas of the same size 
// and copied, pixel by pixel into another offscreen canvas with the 
// new size. 

var widthScaled = img.width * scale; 
var heightScaled = img.height * scale; 

var orig = document.createElement('canvas'); 
orig.width = img.width; 
orig.height = img.height; 
var origCtx = orig.getContext('2d'); 
origCtx.drawImage(img, 0, 0); 
var origPixels = origCtx.getImageData(0, 0, img.width, img.height); 

var scaled = document.createElement('canvas'); 
scaled.width = widthScaled; 
scaled.height = heightScaled; 
var scaledCtx = scaled.getContext('2d'); 
var scaledPixels = scaledCtx.getImageData(0, 0, widthScaled, heightScaled); 

for(var y = 0; y < heightScaled; y++) { 
    for(var x = 0; x < widthScaled; x++) { 
     var index = (Math.floor(y/scale) * img.width + Math.floor(x/scale)) * 4; 
     var indexScaled = (y * widthScaled + x) * 4; 
     scaledPixels.data[ indexScaled ] = origPixels.data[ index ]; 
     scaledPixels.data[ indexScaled+1 ] = origPixels.data[ index+1 ]; 
     scaledPixels.data[ indexScaled+2 ] = origPixels.data[ index+2 ]; 
     scaledPixels.data[ indexScaled+3 ] = origPixels.data[ index+3 ]; 
    } 
} 
scaledCtx.putImageData(scaledPixels, 0, 0); 
return scaled;

}

通讀文章，視網膜顯示器和移動的存在safari可能會增加渲染正確尺寸像素藝術的複雜性。儘管使用iOS7的移動Safari，這可能會被糾正。

來源

2013-10-11 12:56:59