问题标签 [image-rendering]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
11961 浏览

html - 在画布(和 img)上使用带有 CSS 缩放的最近邻

使用 CSSzoom属性时,如何说服浏览器使用“最近邻”而不是“双线性”或任何其他更高级的缩放算法?

我的设置是一个包含画布的 div,该 div 通过 JavaScript 获取其缩放设置<div style="zoom:3200%">...</div>,以获取最近的邻居,我image-rendering: -webkit-optimize-contrast在我的 CSS 中使用。该应用程序在此处可用('z' 放大,'shift-z' 缩小),我的 css 在这里

这是在 OSX 上的 Chrome 中所需的效果(缩放设置为 3200%): 使用最近邻放大 OSX/Chrome

但在 Windows 7 上的 Chrome 中也是如此: 放大 Windows/Chrome 不使用最近的邻居

在这两种情况下,它都是开箱即用的“香草”Chrome(版本 15.xx),没有打开实验标志。

如何说服 Windows 上的 Chrome 使用最近邻居?就此而言,我怎样才能说服所有浏览器?Safari 也不使用最近邻(目前该应用仅适用于基于 WebKit 的浏览器)

CSSimage-rendering属性确实会影响 Chrome/OSX 并给我想要的效果。但是 Chrome/Windows 和 Safari(5.1)/OSX 似乎都完全忽略了它。有些事情告诉我我只是运气不好,但我想我会问。

在 div 容器上使用zoom非常简单,并且在 Chrome/OSX 中运行良好,如果我必须在内部使用缩放画布,我也可以这样做。但如果可能的话,更喜欢字面上的一行代码解决方案!

更新:我发现使用image-rendering: optimizeSpeed帮助。然而,它在 Chrome/Windows 中似乎很挑剔。如果我将它设置在太多元素上(我最初尝试过,我的容器和所有画布),它不会生效。但如果我将它应用到 just canvas,我会得到 98% 的结果。

现在我的问题是我第一次在放大时绘图,它工作得很好,所有其他后续绘图动作在它们发生时都是模糊的,然后恢复到正确的最近邻居(我的应用程序首先绘制到临时画布,然后将绘图应用到真实的画布上)。Chrome 坚持使用双线性的草稿画布有些奇怪。我认为通过一些挖掘我可以解决这个问题。

UPDATE2:似乎image-rendering在 Chrome/Windows 上实现得并不好,而且有点问题。我现在可以确认 Chrome/Windows 不支持这些optimizeSpeedoptimizeQuality。如果您为它们设置图像渲染,Chrome 将忽略该设置。Chrome/Windows 确实可以识别-webkit-optimize-contrast,但它并没有始终如一地使用它。Chrome 将几乎随机地在看起来是双线性缩放算法和最近邻算法之间切换。我无法始终让 Chrome 使用最近邻。

我在 Windows 上尝试了 Chromium 17 的构建,它的行为方式相同。

Firefox (8.0.1) 看起来很有希望,因为它看起来-moz-crisp-edges确实很好。最初我将 Chrome 定位为这个应用程序的“理想浏览器”,我可能会切换到 Firefox。

最后,似乎image-rendering对 Chrome 的适当支持正在酝酿之中,只是还没有完全实现。WebKit 本身声称完全支持所有图像渲染值,但我猜测 Chrome 使用的 WebKit 构建还没有完全更新到这个新修复。

0 投票
4 回答
5057 浏览

delphi - 将 SVG 图形加载到 FireMonkey 应用程序中要走什么路?

我能想到的大约有四种实现能够将 SVG 图形加载到 Delphi 应用程序中。

其中之一是FMX.Canvas.VPR 的作者 Mattias Andersson与 FireMonkey 合作,但他还没有准备好发布代码。

第二个由Martin Walter编写,与 VCL 一起工作,但开发人员已退出 Delphi,并且没有计划转换为 FireMonkey。

第三个是AGGPAS框架的一部分,与 VCL 一起工作,但没有 FireMonkey。

Jason Southwell 正在开发第四个,但尚未确定日期。

所以我的问题是:如果我今天想要一个 SVG 组件,而不试图重新发明轮子第五次(可能更多次),该怎么办?

0 投票
2 回答
8706 浏览

css - 我应该使用 JPG 还是 PNG 作为平铺背景(背景重复)?

我阅读了有关该主题的几个问题,我看到的一般反馈是JPGs 用于照片,PNGs 用于其他所有内容:

在以下情况下应使用 PNG:

  • 您需要透明度(1 位或 alpha 透明度)
  • 无损压缩效果很好(例如图表或徽标,或计算机生成的图像)

在以下情况下应使用 JPEG:

  • 无损压缩效果不好(比如照片)
  • 需要全彩

GIF 应该在以下情况下:

  • PNG 不可用,例如在非常旧的软件或浏览器上
  • 动画是必要的

但是,这些讨论似乎更适合图像下载。我的问题更适合图像渲染。我打算在 x 和 y 方向重复背景...

...我可以将我的图像存储为JPG~13K 或PNG~50K。因此,尽管有大约 40K 的差异,但浏览器将能够非常快速地提取此图像,因为它相对较小。但是当浏览器在页面上呈现图像时,这种差异是否重要,尤其是因为它是重复的背景?

0 投票
0 回答
504 浏览

asp.net-mvc-3 - 在视图中渲染图像

我正在尝试在强类型视图中为用户显示一些图片。在模型成员中有一个表示图像内容(例如 jpeg) 我应该如何将此内容传递给 img 标签以呈现此图像?模型看起来像:

视图看起来像

我从父视图将其渲染为:

我进行了很多搜索,但仅发现由于某些控制器的操作而返回图像的实现。有没有办法在视图中显示具有 fileContentResult 的图像?提前致谢。

0 投票
1 回答
1174 浏览

ios - renderInContext: 可以保持圆角半径和阴影吗?

我有一个带有圆角和阴影的自定义 UILabel。我正在使用 CALayer 上的属性来实现这一点。接下来,我尝试使用 renderInContext: 将其保存为 UIImage。圆角保持不变,但出现黑色背景和松散的阴影。

渲染图像

关于将 UILabel 渲染为图像但保持阴影和圆角的任何想法?

这是我用来呈现标签的代码:

0 投票
2 回答
1971 浏览

macos - SVG 镶边

当我注意到 Google Chrome (20) 中存在一些严重的条带问题时,我正在使用 svg 文件来生成平滑渐变。更奇怪的是,当我将 chrome 移到我的电影显示器上时,条纹明显减少,这使得这更加奇怪。下面是当网站跨越我的mbp的本机屏幕(左)和电影院显示(右)时拍摄的单个屏幕截图(根本没有photoshop)。 macbook pro原生显示左,电影显示右 如您所见,左侧的条带更加严重。更奇怪的是,在 safari FF 或 ie9 中仍然存在接近于零的条带。下面是同样的情况,但在 FF

现在从FF

我有一种感觉,这可能是驱动程序问题或类似问题。但我真的很想知道。这到底是怎么回事?为什么它会在屏幕之间显示如此不同?跨两个显示器的单个屏幕抓取怎么可能产生这样的变化?

我也刚刚注意到 FF 窗口的 POSITION 改变了渲染。当超过一半的窗口在本机显示器上时,电影院一侧会出现条带,但本机一侧没有。当窗口移动到一半以上在电影院显示时,条带显示在电影院一侧消失并出现在原始一侧。safari 也是如此,但是 chrome 没有这种行为,条带在原生端总是更明显,而在影院端则不太明显。

这真的让我很奇怪。这到底是怎么回事?

0 投票
2 回答
1392 浏览

c# - 渲染视图中已经存在的图像字节数据

我是 MVC(来自面向对象的 C# exe 应用程序)和 Stackoverflow 的新手。我一直在努力尝试使用 MVC 有效地运行代码。我有从数据库返回的模型数据,以及该数据是一个字节字段,它是一个 jpeg 图像。在这个阶段,我已经对数据库进行了一次调用......

现在我坚持的是,一旦填充的模型数据在要渲染的视图中,我不能简单地循环它并在每个数据行中渲染图像。我发现使它工作的唯一方法是调用返回 FileContentResult 的 Action 方法,但这需要重新调用每个图像的数据库。

对于解决方案,我尝试了三种不同的方法来解决以下问题:

  1. 我似乎无法通过 Action 方法将字节数组传递回控制器,以满足 MVC 希望在视图中接收 FileContentResult 的方式。Action 方法只想接受简单类型。
  2. 我显然不想让控制器返回数据库以获取视图中已有的字节数据,尤其是当这将涉及模型数据中的每个条目的多次往返时。
  3. 使用 Data Uri 是可行的,但还没有足够多的浏览器支持它。

有人可以告诉我处理此类问题的最佳方法是什么吗?我是否需要处理问题 1 或 2,或者我是否缺少其他方法?

这是我最初在问题 1 中尝试使用的代码,用于将字节数组传回控制器,以便渲染 FileContentResult:

0 投票
0 回答
115 浏览

gwt - 使用 GWT 加载和绘制的没有任何格式(非标准,只是数据数组)的原始图像数据

有人有使用 GWT 进行图像渲染或处理的经验吗?

我被困在 GWT 客户端图像渲染上。由于我需要显示的图像是非标准格式(想象为数据数组),因此我无法在客户端创建 Image 对象来呈现它。我所做的是使用带有 GWT(ImageData 类)的 HTML5 元素设置每个像素的 RGBA 值,这非常慢。我想知道是否有办法提高渲染速度,甚至有更好的方法来渲染原始图像数据?因为,在客户端绘制图像之后,我的下一步是进行一些像素级操作,这也是实时工作所必需的。

0 投票
1 回答
232 浏览

jquery - 如何从 Heroku 的 Play 框架、Jquery Ajax 捕获和渲染图像

正如标题所述,我正在尝试从我的数据库中获取图像以尝试在外部网页上显示。最终,我想将它用于使用 PhoneGap 运行的移动应用程序。

(这是在成员类中)

到目前为止,然后我尝试使用 ajax 接收图像,我得到了这个:(注意,这就像我得到的 100 行中的一半)

�������"������ ��?����������
���������<br> �3�!1AQa"q�2��� B#$R�b34r��C%�S���cs5���&D�TdE£t6�U�e���u��F'�������������� Vfv��������7GWgw���������5�!1AQaq"2����B#�R��3$b�r��CScs4�%���&5 ��D�T�dEU6te����u��F��������������Vfv��������'7GWgw����������? ��^�[�'*��X���;+����#��u#Ѻ�zn���s����L�ʿ�m�Z%%�Z�P�n �W��&�6��}�G�� O�Q�k~1�y$\��Վ��ku���z�X�.�WSs�z��c}�f� ������J��L���'ncO��E��K�z��V%7\����0���c`��/�?����A^� ��v��k�&�^� i�s?ͳژM!+}Ula.~��˩w�g�؊�̻��Q��|���W��

那么无论如何我可以将其转换为Base64吗?或者甚至只是我可以用来放置在 html 文件上的图像标签中的东西?

0 投票
1 回答
532 浏览

html - 在jsp中渲染图像的问题

我无法在 jsp 中渲染图像。其他一切工作正常,即所有数据都在渲染。它只是导致问题的图像。我知道路径是正确的

或者

下面的代码呈现了jsp

我尝试了一些方法,但似乎没有任何效果。jsp 被加载到 jeditorPane 中,并从中创建图像。

我最多只能看到一些带有太阳和山脉的破碎或未渲染的图像......不确定它是什么

有人可以帮我解决这个问题吗?