CSS缩放不模糊但像素化 [英] CSS zoom not blurry but pixelated

问题描述

我想在CSS中对图像使用zoom属性，但不希望对放大的图像产生模糊效果，而希望将其像素化。我该如何实现？

I'd like to use zoom property in CSS for images but would not like to have a blurry effect to enlarged images but rather pixelated. How can I achieve this?

编辑：如果需要，可以使用其他属性或其他语言。

edit: if neccesary, it is ok to use other properties or other languages.

推荐答案

您不能（当前）使用向上缩放，并且指定浏览器不应该使用最近邻缩放，而对于HTML图像，放大的HTML5画布，都不能使用 drawImage（） 在画布上绘制更大的图像，也不放大SVG上的图像。

You cannot (currently) use upscaling and specify that the browser should use nearest-neighbor zooming, neither with HTML images, upsized HTML5 canvases, using drawImage() on a canvas to draw the image larger, nor zooming up images on SVG.

这是解决方案（为此相关问题）显示如何通过使用SVG在矩形中重新创建图像来使用最近邻像素缩放图像： http ：//phrogz.net/tmp/canvas_image_zoom_svg.xhtml

这里是另一个解决方案，展示了如何使用HTML5 Canvas达到相同的效果（在画布上绘制矩形） F或缩放）：

http://phrogz.net/tmp/canvas_image_zoom。 html

Here's another solution showing how to achieve this same effect using HTML5 Canvas (drawing rectangles on the canvas for the zoom):
http://phrogz.net/tmp/canvas_image_zoom.html

这篇关于CSS缩放不模糊但像素化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！