通过图像叠加避免 openlayer 中的大量内存使用
我正在构建一个地图系统，需要将大图像（原始 13K 像素宽 x 20K 像素高）叠加到美国大约 20 公里左右的区域上。我的 jpg 格式图像文件大小小至 23 MB，并且加载到地图上的速度相当快。我可以放大和缩小，看起来很棒。它甚至位于我需要的地方（地理位置）。然而，这个 25 MB 的文件导致 Firefox 额外消耗 1GB 内存！！！我在 Firefox 上使用内存重启扩展，没有图像覆盖，内存使用量约为 360 MB 到 400 MB，这似乎是常规使用、浏览其他网站等的标准。但是当我添加图像层时，内存使用量跃升至 1.4 GB。我完全无法解释为什么会这样以及如何解决它。任何想法将不胜感激。
安德鲁
I am building a map system that requires a large image (native 13K pixels wide by 20K pixels tall) to be overlayed onto an area of the US covering about 20 kilometers or so. I have the file size of the image in jpg format down to 23 MB and it loads onto the map fairly quickly. I can zoom in and out and it looks great. It's even located exactly where I need it to be (geographically). However, that 25 MB file is causing Firefox to consume an additional 1GB of memory!!! I am using Memory Restart extension on Firefox and without the image overlay, the memory usage is about 360 MB to 400 MB, which seems to be about the norm for regular usage, browsing other websites etc. But when I add the image layer, the memory usage jumps to 1.4 GB. I'm at a complete loss to explain WHY that is and how to fix it. Any ideas would be greatly appreciated.
Andrew
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
JPEG 文件仅占用 23 MB。然而，JPEG 格式是压缩的，任何想要实际渲染图像的程序（例如 FireFox）都必须将其解压缩并将每个像素存储在内存中。您有 13k x 20k 像素，即 260M 像素。每个像素至少包含 3 个字节的颜色信息，即 780 MB。它可能使用 4 个字节，使每个像素在字边界处对齐，即 1040 MB。
至于如何修复它，嗯，我不知道是否可以，除非缩小图像尺寸。如果图像仅包含少量颜色（例如，用几种原色绘制的简单图表），您可以将其保存为某种使用索引颜色的格式，然后 FireFox可能 能够使用更少的每个像素内存来渲染它。这一切都取决于渲染代码。
根据您正在做的事情，也许您可以进行设置，使整个图像处于较低的分辨率，然后当用户放大时，他们会得到覆盖较小区域的更高分辨率的图像。
编辑：澄清最后一点：现在您拥有全分辨率的整张照片，这很简单，但需要大量内存。另一种方法是降低整个照片的分辨率（最大预期屏幕分辨率），这样会占用更少的内存；然后，当用户放大时，您将获得全分辨率的图像，但不是整个图像 - 只是放大的部分（同样需要更少的内存）。
我可以想到两种方法：将大图像分解为“图块”并加载您需要的图像（不确定这效果如何），或者使用 ImageMagick 之类的东西即时构建较小的图像。如果您这样做，您可能希望使用缓存，并且您可能需要编写一些“请稍候”消息以在构建时显示，因为处理如此大的图像可能需要几秒钟的时间。
The file only takes up 23 MB as a JPEG. However, the JPEG format is compressed, and any program (such as FireFox) that wants to actually render the image has to uncompress it and store every pixel in memory. You have 13k by 20k pixels, which makes 260M pixels. Figure at least 3 bytes of color info per pixel, that's 780 MB. It might be using 4 bytes, to have each pixel aligned at a word boundary, which would be 1040 MB.
As for how to fix it, well, I don't know if you can, except by reducing the image size. If the image contains only a small number of colors (for instance, a simple diagram drawn in a few primary colors), you might be able to save it in some format that uses indexed colors, and then FireFox might be able to render it using less memory per pixel. It all depends on the rendering code.
Depending on what you're doing, perhaps you could set things up so that the whole image is at lower resolution, then when the user zooms in they get a higher-resolution image that covers less area.
Edit: to clarify that last bit: right now you have the entire photograph at full resolution, which is simple but needs a lot of memory. An alternative would be to have the entire photograph at reduced resolution (maximum expected screen resolution), which would take less memory; then when the user zooms in, you have the image at full resolution, but not the entire image - just the part that's been zoomed in (which likewise needs less memory).
I can think of two approaches: break up the big image into "tiles" and load the ones you need (not sure how well that would work), or use something like ImageMagick to construct the smaller image on-the-fly. You'd probably want to use caching if you do it that way, and you might need to code up a little "please wait" message to show while it's being constructed, since it could take several seconds to process such a large image.