加载一个巨大的图像（5MB）为SVG背景导致像素化和性能问题 [英] Loading a huge image (5mb) into svg background leads to pixelation and performance issues

问题描述

我有一些问题的像素化和性能 SVG背景图像与D3.js在一起。

I have some issues with pixelation and the performance of SVG background images together with D3.js.

您已经可以在这里看到一个正在运行的例子： http://arda-maps.org/ages/第一/ 请不要共享，直到它仍然是阿尔法。谢谢你。

You can already see a running example here: http://arda-maps.org/ages/first/ Please don't share until it's still Alpha. Thank you.

因此​​，让我们在树木作为一个例子。这是他们应该怎么看起来像在浏览器后，以及：

So let's take the trees as an example. This is how they should look like later in the browser as well:

正如你所看到的，他们可能不是最好的质量，但你可以几乎看不到任何像素。所以，我用这张照片（5MB〜），正如你可以当你点击实验室图标（底部）上面的链接看到，等待几秒钟...你可以看到有它们为好。

And as you can see, they might not be in the best quality but you can just hardly see any pixel. So I use this picture (~5mb) and as you can see in the link above when you click on the lab icon(on the bottom) and wait some seconds...you can see them there as well.

好吧，但是如果你在你放大可以看到像素。而且感觉（与矢量视图）非常laggy和性能下降巨大的。在这里，一个在网站上该区域的观点：

Alright, but if you zoom in you can see pixels. And it feels (compared to the vector view) very laggy and the performance drops immense. Here a view of that area on the website:

我也提到了Chrome的近崩溃之前，他还没有完成背景risizing或什么的。但在Firefox运行pretty好。因此，请在Firefox如果可能的话进行测试。

I also mentioned that Chrome nearly crashes before he did not yet finish the background risizing or whatever. But in Firefox it runs pretty well. So please test it in Firefox if possible.

另一个subissue 的是，在放大步骤7至19日，至少在Firefox中，你看不到图像背景。但鉴于矢量所有的罚款。而且，由于我没有改变什么，这是另一个问题。但我无法找出一个原因= /

Another subissue is that at least in Firefox in the zooming step 7 to 19 you don't see the image background. But in vector view all is fine. And since I do not change anything, this is another issue. But I couldn't find out a reason for this =/

我知道我可以使用平铺图像的图形。但这些都是硬或者甚至不可能结合使用具有至少在D3.js.一个向量图我知道，谷歌地图和其他人成功地这样做。但他们不喜欢我，例如做从topojson使用的数据。

I know I could use tile image graphics. But these are hard or maybe even not possible to use in combination with a vector view at least in D3.js. I know Google Maps and others are successfully doing it. But they don't use data from a topojson like I do for instance.

在最后，我想有一个可以在载体和图像视图中查看地图。我也打开任何创造性/古朴的想法=）

In the end I would like to have a map that can be viewed in vector and image view. I'm also open for any creative/quaint idea =)

非常感谢你。

推荐答案

由于5MB是太多的浏览器。我现在用的 50％的宽度和高度进行了测试。所以画面现在只是 2,33mb 大。

As 5mb are too much for browser. I now tested it with 50% of width and height. So the picture is now just 2,33mb big.

正如你可以看到，它的现在的作品在Firefox和Chrome和图片加载中约2秒钟。性能也还可以。

And as you can see, it works now in Firefox and Chrome and the picture is loading in about 2 seconds. The performance is also okay.

但我肯定不能放大，许多到地图了，otherwhise它变得非常pixeled。所以我就封顶在变焦7倍。

But for sure I cannot zoom that much into the map anymore, otherwhise it get very pixeled. So I capped it at zooming 7x.

因此​​，唯一的其他解决办法是平铺图像，但是这将是办法很难此项目做。正如我说，这将杀软变焦。

So the only other solution would be tiling images, but that would be way to hard to do for this project. And as I said this will kill the soft zooming.

这篇关于加载一个巨大的图像（5MB）为SVG背景导致像素化和性能问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！