如何在缩放imageOverlay时在小册子中避免重新采样

Question

我在使用Leaflet 1.0.0中的imageOverlay。

当放大，图像重采样，并逐渐变得“更模糊”你放大。（单张正在被它放大插值像素值的帮助。）

我想避免这种重采样，以便进一步图像层在放大时会变得“块状”。也就是说，它给用户带来了像素逐渐放大的印象。

我可以在Leaflet API中看不到任何方式来控制。我可以通过制作非常大的图像来解决这个问题，但是这样会很昂贵，并且在任何情况下都会在高缩放级别下分解。

是否可以通过Leaflet API或其他方法做我想要的东西？

Answer 1

图像的“模糊”不是由于传单，这是由于您的网络浏览器。当图像（任何图像）以不同于图像的像素尺寸的尺寸加载到网页中时，浏览器必须使用其选择的缩放算法重新缩放它。

部分浏览器让网络作者通过image-rendering CSS rule调整此行为。

您可以将CSS规则应用于所有L.ImageOverlay s的类似：

.leaflet-layer-image { 
    image-rendering: crisp-edges 
} 

由于单张1.0.2，它是无法为特定的ImageOverlay小号CSS类。

请注意不同的浏览器支持。支持image-rendering CSS规则在不同的Web浏览器之间变化疯狂。

---

解决方案，如在问题Using nearest-neighbor with CSS zoom on canvas (and img)描述的是不是真的在这里适用，因为单张很大程度上依赖于CSS转换设置图像大小。如果您要使用基于<canvas>的技术，则会在每次缩放级别更改时打破或需要重绘。

（PS：如果你能找到一个好的可靠跨浏览器的方式来强制裁员/在所有主要浏览器升迁算法，请pull请求，使得单张可从中受益）