问题标签 [image-rendering]

从 6.2 升级到 7.6 图像未正确渲染后，我得到不正确的图像，并且在不应该出现这种情况的情况下到处都是。

在一些德国论坛上发现图像渲染在 7.6 中是可能的，只是不确定哪些参数发生了变化。任何想法在 7.6 上渲染图像的正确方法是什么？

我有一个名为 mainContainer 的容器。在这个容器中，我想创建一个缩略图库。不幸的是，当我修改我的 CSS 时，我遇到了一些问题，我的 mainContainer 有一些白色背景色而不是背景色。

这是结果页面：带有意外白色背景的缩略图库 这是我页面的代码。

函数 createThumbnail 的 Express JS 代码：

现在是 CSS 部分：

我将不胜感激。我必须怎么做才能去除这些白色背景颜色？

继承似乎会导致问题：请参阅未考虑的属性

当我在自身顶部放置一个缩小的图像并将 CSSimage-rendering参数设置为pixelated：

图像不是像预期的那样出现像素化，而是平滑（并且比原始图像更清晰）。通常pixelated应用时，图像看起来很粗糙（见下文）。

您可以通过删除容器中的第一个图像并比较结果来测试这一点。或删除第二个以查看默认渲染。

然而，有一个警告。虽然它可能对照片很有用，但在使用艺术品时，某些边缘会出现锯齿状。一种解决方法是介于两者之间并在叠加的图像上应用 0.4 左右的不透明度，至少提供一些清晰度。

对这种行为有什么解释吗？它不适用于 IE 或我尝试过的任何其他浏览器。

更新：我在以下 32 位和 64 位版本的 Chrome 中对此进行了测试，结果如下：

60.0.3112.113（64 位）- 有效

60.0.3112.101（64 位）- 有效

59.0.3071.86（64 位）- 有效

58.0.3029.96（64 位）- 不需要使用 hack，因为image-rendering: pixelated已经显示没有像素化的锐化图像

58.0.3029.96（32 位） - 不需要使用 hack，因为image-rendering: pixelated已经显示没有像素化的锐化图像

57.0.2987.133（64 位）- 不需要使用 hack，因为image-rendering: pixelated已经显示没有像素化的锐化图像

56.0.2924.87（64 位）- 不起作用

55.0.2883.75（64 位）- 不起作用

53.0.2785.116（32 位）- 不起作用

48.0.2564.109（64 位）- 不起作用

在 THREE.js 中提高纹理质量的可能和好的方法/最佳实践/等是什么？

我有一个场景，我有 512x512px 纹理的飞机（卡片）。您可以在下面的图片中看到它的外观。我的问题是纹理看起来很模糊。我试图改变过滤器和各向异性的值，它有所帮助，但只是一点点，纹理仍然模糊。当纹理看起来像我想要的那样时，我发现的唯一一种方法 - 增加渲染大小 x2 并保持画布大小相同。由于性能问题，这是不好的方法，但我没有找到另一种获得良好纹理质量的方法。

最好的质量 - 渲染大小 x2

正常质量 - magFilter = minFilter = THREE.LinearMipMapLinearFilter /anisotropy = 16

质量差 - 没有过滤器

我希望能得到任何帮助，在此先感谢

我在 opengl-es-2.0 中以相对于观察者（地板）的大角度渲染纹理。在支持各向异性过滤的硬件上，一切都很好。但是，我需要支持一些硬件中没有此功能的设备（没有 GL_EXT_texture_filter_anisotropic）。

关闭 mipmap 后，远处的纹理清晰，但正如预期的那样，我有莫尔图案。启用 mipmap 后，莫尔图案消失了，但远处的纹理变得模糊（再次，正如预期的那样）。

没有各向异性过滤的硬件有什么替代方案吗？在片段着色器中这样做是否可行（恐怕只有opengl-es-2.0）？任何地方的示例代码？我确实在椭圆加权平均过滤上找到了http://www.pmavridis.com/ewa.html，我想这可以实现，但是示例代码使用了底层的各向异性硬件过滤，并且无论如何使用了 opengl 上不可用的大量东西- es-2.0。

我的目标不是高帧率，而是良好的图像质量。

当我更改模糊滤镜时，图像会有点颤抖。

这是jsfiddle 的演示。请在演示中单击两次按钮

我在非 Retina 显示屏的 Mac 上使用 Chrome 63.0.3239.84。

我看到很多类似的问题，但没有一个答案可以帮助我
在悬停时移动图像 - 铬不透明度问题
CSS 过渡效果使图像模糊/在 Chrome 中移动图像 1px？

我的 api 上有一个图像渲染方法，用户通过 url 访问它，以便将图像显示为源。我在本地测试时没有问题，因为我只发出单个用户请求。但是当我部署它时，登台/生产测试人员进来了。由于内部服务器错误，正在渲染的图像被破坏，我猜这是因为多个请求。

这是我的做法：

如您所见，在实际渲染图像之前有令牌和 id 检查。

我对这个方法没有具体的理由。我只是觉得将链接作为图像源很方便。

我期待来自多个用户的请求会等到之前的执行完成后再进入，但我猜他们同时进入。因此，在某些时候，文件当前处于打开状态或正在被操作，并且另一个请求进来了。因此出现了错误。

关于如何改进这一点的任何想法？

我在我的网站上使用了几个带圆圈的图标，它看起来非常好，但是当仔细观察它时，我可以在所有四个方向上看到直边。我放大，我可以清楚地看到它。我尝试使用带有所有选项的图像渲染，但无法修复它。在 Photoshop 上它看起来像一个完整的圆圈，但在网站上，它没有正确显示。

我尝试了所有其他图像渲染选项，但没有运气。这是我的图片：

如果你仔细观察，你实际上可以看到直线。这是放大时的直线

Microsoft Edge 不支持“图像渲染”CSS 属性，所以我不能使用“图像渲染：像素化”，这对我正在制作的网站来说是一个真正的痛苦。

那么有没有办法使用 JavaScript 在 Edge 中将图像渲染为像素化？

我使用脚本来： 1. 在我的服务器上渲染/保存图像。2. 提供保存的图像作为下载到浏览器。

所以图像不是打开的，而是由浏览器下载的。完美运行。

但是当我在安卓手机上下载图像时，下载后我无法从浏览器/文件查看器中打开图像。但是，在我的画廊中，图像存在，我可以打开它。看起来浏览器（chrome）无法将下载的文件识别为图像。

希望任何人有一个想法。也许与文件头有关？

我用提交表单按钮调用脚本，然后文件被下载，而你留在同一页面上。

编辑：不知何故，当我删除此行时，它会起作用：