픽셀의 두 배 크기

방금 프로젝트의 작은 픽셀 아트를 만들었습니다. http://i.imgur.com/9FLj6Uk.png. 그리고 나는 그것을 내 사이트에서 사용하고 싶다. 보시다시피 소형 픽셀 아트입니다. 하나의 픽셀을 1 * 1 픽셀 대신 2 * 2 픽셀로 그려야합니다. 하나 대신 2 * 2 픽셀을 사용하여 그림을 다시 그릴 것이지만 그것은 나쁜 해결책 인 것 같습니다.픽셀의 두 배 크기

내가

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

하지만이 작동하지 않습니다에 CSS를 사용하려고, 내 브라우저에서 이상한 음영을 보여줍니다. 나는 하드 픽셀을보고 싶다. 누구든지이 문제에 대한 해결책을 알고 있습니까? 나는 당신이 svg 이미지를 사용하는 것이 좋습니다

출처

2013-10-11 Kyrbi

브라우저는 왜 당신이 그 (것)들을 즉석에서 이미지를 확대의 좋은 일을 기대, 이미지 편집기 않나요? – cimmanon

픽셀 아트는 "픽셀 화"또는 "선명한 가장자리"이미지 렌더링의 보편적 인 브라우저 지원 부족으로 인해 브라우저에서 어려움이 있습니다. supported in CSS4이어야합니다. 크롬 (30)와 오페라 (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;

가 test case로, @Phrogz에 의해 this answer를 참조로 보이는 있지만

는 현재 CSS 스택은 다음과 같습니다. 주제에 대해서도 mozilla's documentation을 참조하십시오. 를 통해 기사, 망막 디스플레이와 모바일의 존재를 읽고

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;

}

: 지금은 보편적 인지지를 들어, JS 솔루션은 큰 기사 drawing pixels is hard에 여기에 본대로 시간이 같은 것에 대해 작동 할 수 있습니다 사파리는 올바른 크기의 픽셀 아트를 렌더링하는 데 추가 복잡성을 더할 수 있습니다. iOS7의 모바일 사파리로 인해이 문제가 해결 될 수 있습니다.

출처

2013-10-11 12:56:59