如何在縮放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請求，使得單張可從中受益）