एक छवि पर heatmap.js कैसे प्रस्तुत करें?

Question

मैं Googlemaps प्लगइन का उपयोग करके एक हीटमैप ओवरले करने के लिए heatmap.js का उपयोग कर रहा हूं। मैं तस्वीर को हीटमैप ओवरले के साथ एक छवि के रूप में डाउनलोड करने में सक्षम होना चाहता हूं। मैंने विधि की कोशिश की है heatmapInstance.getDataURL() केवल ओवरले क्षेत्र लौटाता है, न कि उस छवि के साथ जिस पर इसे ओवरले किया गया है।

Answer 1

आप एक आईडी जो आपके div और स्क्रिप्ट टैग

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

के अंदर प्रयोग किया जाता है बनाने के लिए आप देख सकते हैं मैं आईडी 'हीटमैप' द्वारा तत्व मिल की जरूरत है। तो अपने div के अंदर जहां पेज पर तस्वीर को रखना चाहते हैं तो बस आईडी 'हीटमैप' कहते हैं

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

तो बस सीएसएस

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

का उपयोग करके हीटमैप के तहत एक छवि जगह मैं इस्तेमाल किया सीएसएस, एचटीएमएल और जावास्क्रिप्ट के लिए एक ही आईडी।