Html2canvas: पत्रक का उपयोग करके निर्यात करना

http://jsfiddle.net . का उपयोग करके समस्या का उदाहरण दें

मैंने जेएसफ़िल्ड जोड़ा। https://jsfiddle.net/japiasente/7ybndo5L/

इसे काम करने के लिए कुछ बदसूरत हैक्स लगते हैं। यहां बिना किसी सुधार के एक सरल उदाहरण दिया गया है:

http://jsfiddle.net/djwbra47/

कई समस्याएं हैं:

1. वृत्ताकार मार्कर एक चौथाई-वृत्त से काटा जाता है। ऐसा लगता है कि किसी भी परिवर्तन को लागू करने से पहले html2canvas तत्वों को क्लिप कर रहा है। मार्कर बिना किसी परिवर्तन के 0,0 पर केंद्रित होगा, इसलिए यह क्वार्टर-सर्कल से चिपक जाता है जो उस स्थिति में दिखाई देगा। फिर बाद में html2canvas इसे वास्तविक स्थान पर बदल देता है। मैंने इसे नकारात्मक के बजाय बाएं और शीर्ष मार्जिन को 0 पर सेट करके तय किया (इसलिए संपूर्ण मार्कर 0,0 पर दिखाई देगा), फिर उसी राशि से परिवर्तनों को समायोजित करना। (और फिर निश्चित रूप से कैनवास को पकड़ने के बाद उन मानों को वापस बदल दें।)
2. लाइन गलत जगह पर दिखाई देती है। ऐसा लगता है कि html2canvas SVG पथों पर दो बार परिवर्तन लागू कर रहा है। बिना किसी सुधार के, रेखा ऊपरी बाईं ओर बहुत दूर दिखाई देती है। यदि आप इसके परिवर्तन को 0 में बदलते हैं, तो यह उतनी ही दूरी को नीचे दाईं ओर बहुत दूर तक दिखाता है। मुझे इसे काम करने के लिए मूल मूल्यों के आधे हिस्से में परिवर्तन करना पड़ा।
3. जब आप मानचित्र को पैन करते हैं, तो टाइलें मूल सीमा तक काटी जाती हैं। यह संख्या 1 के समान ही समस्या है: पत्रक मानचित्र फलक को रूपांतरित करके मानचित्र को पैन करता है, और html2canvas उस परिवर्तन को लागू करने से पहले टाइलों को क्लिप कर रहा है। ठीक करने के लिए, ट्रांसफ़ॉर्म X और Y मानों को प्रत्येक img के बाएँ और शीर्ष मानों में जोड़ें, फिर उनके ट्रांसफ़ॉर्म को 0 पर सेट करें।
4. जब आप मानचित्र को पैन करते हैं, तो html2canvas मार्कर और रेखा के ऊपर टाइलें खींचता है ताकि वे अब दिखाई न दें। यह तब तय होता है जब आप नंबर 3 में बदलाव करते हैं, लेकिन मुझे समझ नहीं आता क्यों। हो सकता है कि किसी तत्व के गुण अपडेट होने पर ड्राइंग ऑर्डर बदल जाए?

यहाँ निश्चित संस्करण है:
http://jsfiddle.net/oo2yms1h/

अभी भी एक समस्या है जिस पर मैंने अभी तक काम नहीं किया है: जब आप मानचित्र को पैन करते हैं तो रेखा दाहिने किनारे के पास होती है, यह कैनवास पर दिखाई नहीं देती है। लेकिन मुझे लगता है कि यह परिवर्तन से पहले html2canvas क्लिपिंग का एक और परिणाम है।

एक और नोट: डिफ़ॉल्ट लीफलेट मार्कर cdn.leaflet.com से होस्ट की गई एक छवि है जो एक CORS त्रुटि देता है, जिसका अर्थ है कि यह कैनवास पर दिखाई नहीं देगा। html2canvas के साथ इसका उपयोग करने वाले किसी भी व्यक्ति को आइकन को स्वयं होस्ट करना होगा, या किसी भिन्न मार्कर शैली पर स्विच करना होगा।

JAPiasente, ऐसा लगता है कि नंबर 3 में मेरा फिक्स आपकी टाइल और पैनिंग मुद्दों को हल करने के लिए अनुकूलित किया जा सकता है। साथ ही, आपके मार्कर एसवीजी पथ हैं और ऐसा लगता है कि नंबर 2 में मेरी लाइन के समान डबल-ट्रांसफॉर्म समस्या से पीड़ित हैं, वे ऊपरी बाईं ओर बहुत दूर दिखाई दे रहे हैं। यहां उन परिवर्तनों वाला एक संस्करण दिया गया है:

https://jsfiddle.net/6tn0zy48/

सब कुछ सही जगह पर दिखाई देता है, सिवाय मार्करों को मानचित्र के नीचे की तुलना में आगे की ओर क्लिप किया जा रहा है। ऐसा लगता है कि यह वही मुद्दा है जिस पर मैं अभी भी काम कर रहा हूं।

उस अंतिम शेष समस्या को ठीक करना कठिन नहीं था, यह केवल परिवर्तन को 0 पर सेट करने और इसके बजाय बाएँ और शीर्ष का उपयोग करने की बात थी।

मेरा सरल उदाहरण, अद्यतन:
http://jsfiddle.net/oo2yms1h/1/

और आपके नक्शे के लिए मेरा संशोधित सुधार:
https://jsfiddle.net/6tn0zy48/1/

मैं क्रोम में काम कर रहा था, और मैंने अभी देखा कि मेरा फिक्स फ़ायरफ़ॉक्स और आईई में काम नहीं करता है। वे ट्रांसफॉर्म स्टाइल को ट्रांसलेशन 3 डी के बजाय ट्रांसलेशन के रूप में दे रहे थे, और मेरे कोड ने माना कि यह हमेशा ट्रांसलेट 3 डी होगा। और उन्होंने क्रोम की तरह लेफ्ट और टॉप के बजाय ट्रांसलेट का उपयोग करके टाइलें लगाईं। यह अद्यतन उदाहरण तीनों ब्राउज़रों के लिए संशोधित किया गया है। टाइलें और मार्कर चिह्न तीनों में काम करते हैं, लेकिन मुझे अभी भी फ़ायरफ़ॉक्स और आईई में दिखाने के लिए एसवीजी पथ नहीं मिल रहे हैं।

http://jsfiddle.net/oo2yms1h/3/

IE को लाइन दिखाने से पहले html2canvas.svg की आवश्यकता थी, और यह तब भी काम नहीं करता जब SVG लेयर पर ट्रांसफॉर्म या लेफ्ट/टॉप प्रॉपर्टीज सेट की जाती हैं। यह उदाहरण आईई में काम करता है, और लगभग फ़ायरफ़ॉक्स में काम करता है:

http://jsfiddle.net/oo2yms1h/5/

लाइन को फ़ायरफ़ॉक्स में दिखाने के लिए, आपको #648 में उल्लिखित html2canvas में परिवर्तन करके बेस 64 एन्कोडिंग पर स्विच करने की भी आवश्यकता है:
https://github.com/niklasvh/html2canvas/pull/648/files

अब तक की आपकी मदद के लिए धन्यवाद। अब एकमात्र आखिरी मुद्दा यह है कि अगर मेरे पास इसके ऊपर एक एसवीजी ओवरले है, तो आईई इसके साथ अच्छी तरह से खेल नहीं रहा है। नक्शा और एसवीजी ओवरले क्रोम में अच्छी तरह से काम कर रहे हैं। कोई विचार?

@ क्रेगवा आप अद्भुत हैं। मैंने इस मुद्दे को ठीक करने की कोशिश में अभी पिछले दो दिन बिताए हैं। काश मैं पहले आपके jsfiddles पर आ जाता। धन्यवाद!!!

मुझे @CraigVA समाधान का उपयोग करने में एक समस्या थी, जहां अगर मैं मानचित्र को बिल्कुल भी पैन करता हूं, तो ओवरले टाइल से केंद्र से दूर होंगे।

इसका मुकाबला करने के लिए, मैंने जो कुछ किया वह एक रेड्रा () फ़ंक्शन था जो दृश्य को एक सेकंड के लिए समुद्र में किसी अन्य स्थान पर सेट करता था और फिर दृश्य को वापस वहीं सेट करता था। ठीक काम करता है।

function redraw() {
    var lat_tmp = map.getCenter().lat;
    var lng_tmp = map.getCenter().lng;
    map.setView([-66.22149259832975, -1.142578125]);
    setTimeout(function () {
        waitForTilesToLoad()
    }, 50000);
    map.setView([lat_tmp, lng_tmp]);
}

यदि कोई इस पर आता है और एक ही समस्या है।

नमस्ते, इस हैक के लिए धन्यवाद, यह पथ परतों और बड़े टाइललेयर को छोड़कर अच्छी तरह से काम करता है।

• यदि पथ परत (बहुभुज/पॉलीलाइन) का एक हिस्सा मूल मानचित्र सीमाओं से बाहर है, तो जब मैं मानचित्र को स्थानांतरित करता हूं तो इसे html2canvas द्वारा क्लिप किया जाता है।
  मैंने आपके कोड को यहां http://jsfiddle.net/c8LL4qfo/ लंबी पॉलीलाइन के साथ अपडेट किया है। मानचित्र को स्थानांतरित करने का प्रयास करें, आप देखेंगे कि कैनवास में रेखा काटी गई है।
  कैसे इस बग को हल करने के बारे में कोई विचार?

• दूसरा बिंदु: यदि टाइललेयर बहुत बड़े हैं तो html2canvas मानचित्र के प्रस्तुत होने की प्रतीक्षा नहीं कर रहा है। UseCors=true के साथ भी। क्या टाइललेयर लोड होने की प्रतीक्षा करने का कोई तरीका है? मैं लोड इवेंट का उपयोग करने के बारे में सोच रहा था, लेकिन मुझे नहीं पता कि मैं कैसे कर सकता था।

धन्यवाद

क्या यह अभी भी v1.0.0 के साथ कोई समस्या है? यदि हां, तो क्या आप कृपया jsfiddle पर एक उदाहरण साझा कर सकते हैं।

मैंने रिएक्ट का उपयोग करके इस समस्या को हल किया: मानचित्र को स्थानांतरित करने के बाद, अंतिम केंद्र और ज़ूम स्तर को ध्यान में रखते हुए पत्रक घटक को रीसेट किया जाता है। html2canvas के साथ अब कोई विरोध नहीं है क्योंकि प्रदान किया गया नक्शा एक नया नक्शा है।

ठीक है, मैंने यहां jsfiddle कोड में अपडेट किया है: http://jsfiddle.net/2zkLkLxc/
V1.0.0 के साथ और कोई क्लिपिंग समस्या नहीं है, लेकिन मानचित्र को स्थानांतरित करते समय आइकन क्लिपिंग (कभी भी) और टाइल क्लिपिंग के साथ हमें वापस समस्याएं हैं।
मैंने टाइल्स पर हैक हटाने की कोशिश की और यह कुछ भी नहीं बदलता है।

यह अजीब है, क्योंकि मैंने अपने कोड में v.1.0.0 में अपडेट किया है और मेरे पास आइकन क्लिपिंग नहीं है।

यह समस्या अपने आप बंद कर दी गई है क्योंकि मूल लेखक की ओर से अधिक जानकारी के लिए हमारे अनुरोध का कोई जवाब नहीं मिला है। केवल उस जानकारी के साथ जो वर्तमान में समस्या में है, हमारे पास कार्रवाई करने के लिए पर्याप्त जानकारी नहीं है। यदि आपके पास है तो कृपया संपर्क करें या हमारे लिए आवश्यक उत्तर खोजें ताकि हम आगे की जांच कर सकें।

मुझे भी यही समस्या है, लेकिन मैंने Google मानचित्र के बजाय USC मानचित्र का उपयोग किया।
कोड नीचे है

वर ट्रांसफॉर्म = $ ("। लीफलेट-मैप-पैन")। सीएसएस ("ट्रांसफॉर्म");
अगर (रूपांतरण) {
वर सी = ट्रांसफॉर्म। स्प्लिट (",");
वर डी = पार्सफ्लोट (सी [4]);
वर एच = पार्सफ्लोट (सी [5]);
$(.leaflet-map-pane").css({
"रूपांतरण": "कोई नहीं",
"बाएं": डी,
"शीर्ष": हु
})
}
html2canvas(document.body).then(function(canvas){
$(.leaflet-map-pane").css({
बाएं: 0,
शीर्ष: 0,
"ट्रांसफ़ॉर्म": ट्रांसफ़ॉर्म
})
} // यहां इस्तेमाल किया गया है html2canvas 1.0.0-alpha.9

@ क्रेगवा बहुत बहुत धन्यवाद!

क्लिपिंग समस्या के संबंध में मुझे इस समय स्टैक ओवरफ्लो पर कोई समस्या है। मैं पत्रक 1.3.1 का उपयोग कर रहा हूँ। अगर कोई मुझे कुछ मार्गदर्शन प्रदान कर सकता है तो इसकी बहुत सराहना की जाएगी। मुद्दा यहाँ है।

@niklasvh समस्या अभी भी बनी हुई है: http://jsfiddle.net/x3jzsg9b/4/

समस्या अभी भी वहीं है: https://jsfiddle.net/x512pgjt/269/

@amarandon @bomba1990

अपने मानचित्र से डी रेंडरर पैडिंग को हटाने का प्रयास करें। इसने मेरे लिए काम किया।

map.getRenderer(map).options.padding = 0;

यह प्यारा काम किया!

html2canvas(document.querySelector("#mapid"), {
अनुमति दें: सच है,
कॉर्स का उपयोग करें: सच
}).फिर (कैनवास => {
document.body.appendChild(कैनवास)
});