Jak renderować plik heatmap.js na obrazie?

Question

Używam heatmap.js do nałożenia mapy cieplnej za pomocą wtyczki GoogleMaps. Chciałbym móc pobrać obrazek jako obraz wraz z nakładką termiczną. Próbowałem metody heatmapInstance.getDataURL() zwraca tylko obszar nakładki, a nie wraz z obrazem, na którym jest nałożony.

Answer 1

Musisz utworzyć identyfikator, który jest używany wewnątrz swoich div i skryptów tagów

var heatmapInstance = h337.create({ 
    container: document.getElementById('heatMap') 
}); 

Jak widać mam element o identyfikatorze „termiczna”. Więc wewnątrz Twojego div, w którym chcesz umieścić zdjęcie na stronie, po prostu zadzwoń do id „mapę cieplną”

<div id='heatMap'></div> 

Następnie wystarczy umieścić obraz pod mapę cieplną za pomocą css

#heatMap { 
    background-image: url(HinckleyTown.jpg); 
    height: 445px; 
    width: 840px; 
} 

użyłem ten sam identyfikator dla css, html i javascript.