像素艺术在浏览器中非常困难,主要是由于缺乏通用浏览器支持“像素化”或“清晰边缘”的图像渲染。它应该是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,这可能会被纠正。
浏览器是不是图像编辑器,你为什么会想到他们做的飞行放大图像的好工作呢? – cimmanon