javascript - 将巨大图像加载到 D3 map 背景中的高效方法

标签 javascript html css svg d3.js

<分区>

这个问题与之前的问题有关:Loading a huge image (5mb) into svg background leads to pixelation and performance issues

图片大小为 ~5 MB,像素为 20000 x 11596

在这里,我想知道有哪些替代方法可以将巨大的 PNG 图像加载到背景中。我已经尝试了几件事。也许我以错误的方式使用了它们,但最后我以某种方式在 D3.js 的缩放对象中需要此图像。这是我所相信的最困难的部分。将图像加载到整体背景中确实非常简单。但是让它缩放和拖动要困难得多。正如您从上面的链接中看到的那样,我已经做到了,但是性能很糟糕。

所以目前我有一个带有 svg 背景的“有时”运行方法。但是正如您在上面的链接和访问该网站上看到的那样,它现在不起作用。但我认为这是因为图像分辨率/尺寸太高了。几天前它使用相同的代码,非常奇怪。所以 svg 背景不是解决方案。我已经测试了一些其他的东西:

  • 将图像加载到 svg 对象内的 img 环境 - 没有显示任何内容,我认为原因是因为在 svg 中你可以只使用 image 或 < strong>xlink:href
  • canvas加载html5,缩放时显示图片但不改变
  • 使用 CSS 加载图像,在 svg 环境中不起作用

所以没有任何帮助或按预期工作。正如我所说,我有一些特殊的要求:

  • 图片大小约为 5 MB
  • 图像只是 map 的另一种展示方式,所以它应该在点击底部的按钮时加载
  • 最后每个 map 有 3 个不同的图像,因此需要可以在运行时更改它
  • 图像应通过通常的 d3 事件/鼠标交互调整大小和拖动
  • 带有图像的 map 应该具有良好的性能,例如基于矢量的 map

所以我现在的问题是:

  • 哪种解决方案最适合我的情况
  • 如何让它与缩放事件一起工作
  • 或者如何使用 svg 背景改进当前的解决方案

当然我也可以使用平铺图像。但我不想缩放步骤。如果可能的话,我真的很想有一个不需要重新加载图像的 map 。

谢谢。

顺便说一句,这里要显示的图像:http://arda-maps.org/ages/pics/map/ages/firsthigh.png (需要一些时间加载...)

最佳答案

Loading a huge image (5mb) into svg background leads to pixelation and performance issues没有看到解决办法。只需减小尺寸,即可在 Firefox 和 Chrome 中使用。

关于javascript - 将巨大图像加载到 D3 map 背景中的高效方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30028958/

上一篇:html - Vaadin - 删除表格中的单元格边框

下一篇:javascript - 点击推文后弹出推文框并关闭

相关文章:

javascript - 如何从在顶层呈现的组件调用导航

javascript - 如何通过javascript创建自动幻灯片图像?

javascript - 我如何用 php 显示 html 输入框值

javascript - 使用属性值在新选项卡中打开链接

javascript - 搜索和替换旧背景颜色

HTML5 原生输入类型 ="time"元素,如何在 Chrome 中定位伪元素/样式下拉列表?

javascript - 在 sapui5 中从主视图拖放到详细 View

javascript - typescript如何解析@Angular/core/testing的导入以及Angular Core如何打包?

html - 如何强制父元素在调整大小时保持其内容的大小

Jquery 在点击时改进 .css() 动画