问题标签 [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.
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%):
但在 Windows 7 上的 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 不支持这些optimizeSpeed
值optimizeQuality
。如果您为它们设置图像渲染,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 构建还没有完全更新到这个新修复。
delphi - 将 SVG 图形加载到 FireMonkey 应用程序中要走什么路?
我能想到的大约有四种实现能够将 SVG 图形加载到 Delphi 应用程序中。
其中之一是FMX.Canvas.VPR 的作者 Mattias Andersson与 FireMonkey 合作,但他还没有准备好发布代码。
第二个由Martin Walter编写,与 VCL 一起工作,但开发人员已退出 Delphi,并且没有计划转换为 FireMonkey。
第三个是AGGPAS框架的一部分,与 VCL 一起工作,但没有 FireMonkey。
Jason Southwell 正在开发第四个,但尚未确定日期。
所以我的问题是:如果我今天想要一个 SVG 组件,而不试图重新发明轮子第五次(可能更多次),该怎么办?
css - 我应该使用 JPG 还是 PNG 作为平铺背景(背景重复)?
我阅读了有关该主题的几个问题,我看到的一般反馈是JPG
s 用于照片,PNG
s 用于其他所有内容:
在以下情况下应使用 PNG:
- 您需要透明度(1 位或 alpha 透明度)
- 无损压缩效果很好(例如图表或徽标,或计算机生成的图像)
在以下情况下应使用 JPEG:
- 无损压缩效果不好(比如照片)
- 需要全彩
GIF 应该在以下情况下:
- PNG 不可用,例如在非常旧的软件或浏览器上
- 动画是必要的
但是,这些讨论似乎更适合图像下载。我的问题更适合图像渲染。我打算在 x 和 y 方向重复背景...
...我可以将我的图像存储为JPG
~13K 或PNG
~50K。因此,尽管有大约 40K 的差异,但浏览器将能够非常快速地提取此图像,因为它相对较小。但是当浏览器在页面上呈现图像时,这种差异是否重要,尤其是因为它是重复的背景?
asp.net-mvc-3 - 在视图中渲染图像
我正在尝试在强类型视图中为用户显示一些图片。在模型成员中有一个表示图像内容(例如 jpeg) 我应该如何将此内容传递给 img 标签以呈现此图像?模型看起来像:
视图看起来像
我从父视图将其渲染为:
我进行了很多搜索,但仅发现由于某些控制器的操作而返回图像的实现。有没有办法在视图中显示具有 fileContentResult 的图像?提前致谢。
ios - renderInContext: 可以保持圆角半径和阴影吗?
我有一个带有圆角和阴影的自定义 UILabel。我正在使用 CALayer 上的属性来实现这一点。接下来,我尝试使用 renderInContext: 将其保存为 UIImage。圆角保持不变,但出现黑色背景和松散的阴影。
关于将 UILabel 渲染为图像但保持阴影和圆角的任何想法?
这是我用来呈现标签的代码:
macos - SVG 镶边
当我注意到 Google Chrome (20) 中存在一些严重的条带问题时,我正在使用 svg 文件来生成平滑渐变。更奇怪的是,当我将 chrome 移到我的电影显示器上时,条纹明显减少,这使得这更加奇怪。下面是当网站跨越我的mbp的本机屏幕(左)和电影院显示(右)时拍摄的单个屏幕截图(根本没有photoshop)。 如您所见,左侧的条带更加严重。更奇怪的是,在 safari FF 或 ie9 中仍然存在接近于零的条带。下面是同样的情况,但在 FF
我有一种感觉,这可能是驱动程序问题或类似问题。但我真的很想知道。这到底是怎么回事?为什么它会在屏幕之间显示如此不同?跨两个显示器的单个屏幕抓取怎么可能产生这样的变化?
我也刚刚注意到 FF 窗口的 POSITION 改变了渲染。当超过一半的窗口在本机显示器上时,电影院一侧会出现条带,但本机一侧没有。当窗口移动到一半以上在电影院显示时,条带显示在电影院一侧消失并出现在原始一侧。safari 也是如此,但是 chrome 没有这种行为,条带在原生端总是更明显,而在影院端则不太明显。
这真的让我很奇怪。这到底是怎么回事?
c# - 渲染视图中已经存在的图像字节数据
我是 MVC(来自面向对象的 C# exe 应用程序)和 Stackoverflow 的新手。我一直在努力尝试使用 MVC 有效地运行代码。我有从数据库返回的模型数据,以及该数据是一个字节字段,它是一个 jpeg 图像。在这个阶段,我已经对数据库进行了一次调用......
现在我坚持的是,一旦填充的模型数据在要渲染的视图中,我不能简单地循环它并在每个数据行中渲染图像。我发现使它工作的唯一方法是调用返回 FileContentResult 的 Action 方法,但这需要重新调用每个图像的数据库。
对于解决方案,我尝试了三种不同的方法来解决以下问题:
- 我似乎无法通过 Action 方法将字节数组传递回控制器,以满足 MVC 希望在视图中接收 FileContentResult 的方式。Action 方法只想接受简单类型。
- 我显然不想让控制器返回数据库以获取视图中已有的字节数据,尤其是当这将涉及模型数据中的每个条目的多次往返时。
- 使用 Data Uri 是可行的,但还没有足够多的浏览器支持它。
有人可以告诉我处理此类问题的最佳方法是什么吗?我是否需要处理问题 1 或 2,或者我是否缺少其他方法?
这是我最初在问题 1 中尝试使用的代码,用于将字节数组传回控制器,以便渲染 FileContentResult:
gwt - 使用 GWT 加载和绘制的没有任何格式(非标准,只是数据数组)的原始图像数据
有人有使用 GWT 进行图像渲染或处理的经验吗?
我被困在 GWT 客户端图像渲染上。由于我需要显示的图像是非标准格式(想象为数据数组),因此我无法在客户端创建 Image 对象来呈现它。我所做的是使用带有 GWT(ImageData 类)的 HTML5 元素设置每个像素的 RGBA 值,这非常慢。我想知道是否有办法提高渲染速度,甚至有更好的方法来渲染原始图像数据?因为,在客户端绘制图像之后,我的下一步是进行一些像素级操作,这也是实时工作所必需的。
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 文件上的图像标签中的东西?
html - 在jsp中渲染图像的问题
我无法在 jsp 中渲染图像。其他一切工作正常,即所有数据都在渲染。它只是导致问题的图像。我知道路径是正确的
或者
下面的代码呈现了jsp
我尝试了一些方法,但似乎没有任何效果。jsp 被加载到 jeditorPane 中,并从中创建图像。
我最多只能看到一些带有太阳和山脉的破碎或未渲染的图像......不确定它是什么
有人可以帮我解决这个问题吗?