☰

网页放大后图像模糊

tag-icon • tag-icon images webpage
网页放大后图像模糊

我有一个已使用以下命令添加到网页的图像：

<img src="file:/C:/Documents and settings/administrator/desktop/A.bmp">

但是当我使用 Firefox 放大时，图像变得模糊 - 这很糟糕，因为图像具有需要清晰的细节。在 Microsoft Paint 中，放大可使图像保持清晰锐利，那么是否有某种方法可以做到这一点，也许是使用 CSS 或一些不依赖于浏览器的方法？我听说过图像混叠，但不理解它。

答案1

我设法找到了一个解决方案，但是如果有人使用陌生的浏览器怎么办？我使用了许多依赖于浏览器的 CSS 字符串，如下所示：

<head>
<style>
img { 
image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: -o-crisp-edges; /* Opera */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: optimize-contrast; /* CSS3 Proposed */
    -ms-interpolation-mode: nearest-neighbor; /* IE8+ */
}
</style>
</head>

我不知道是否有适合所有浏览器的更好的方法。

答案2

我看到你已经从发布到的答案中获得了解决方案这个超级用户问题。该问题要求解决在放大图像（光栅图像）并将其拉伸到超出其实际尺寸时发生的图像平滑问题。

这必然会发生在任何网络浏览器中，而这似乎不会发生在 Microsoft Paint 中，因为 Paint 允许您使用单个像素，我相信它使用最近邻插值算法在处理光栅图像时缩放它们。

解决问题的实际方法是将光栅图像转换为矢量图形像 SVG 这样的格式将其包含在您的 HTML 文件中。

您可以使用 Inkscape 或 Adob​​e Illustrator 等描摹软件手动执行此操作。您也可以尝试使用 Corel PowerTRACE 或 Vector Magic 等软件进行自动转换。您可以通过将图像上传到 Vector Magic 来查看结果在线追踪工具。

相关内容