Html2canvas: मानचित्र की छवि उत्पन्न करने में समस्या (गूगल मैप्स)

समस्या यह है कि गूगल मैप्स CSS3 ट्रांसफॉर्मेशन मैट्रिक्स का उपयोग करता है, जो पूरी तरह से html2canvas में लागू नहीं होते हैं।

मेरा क्या हाल है?

Google मानचित्र छवियां (बाहरी सर्वर में छवियां)?

प्रॉक्सी का प्रयोग करें: https://github.com/niklasvh/html2canvas#how -does-it-work

brcontainer: मुझे लगता है कि यह अवैध है (किसी अन्य कंप्यूटर/प्रॉक्सी/से सीधे मैप टाइल्स तक पहुंचना)। CORS का उपयोग करने का एकमात्र तरीका है।

@bkralik प्रॉक्सी केवल आपके लिए "अवरुद्ध साइटों" तक पहुंचने के लिए नहीं है, प्रॉक्सी शब्द का अर्थ कुछ और है यदि html2canvas के लिए प्रॉक्सी जावास्क्रिप्ट एपीआई को बाहरी सर्वर से खुली छवियों को बनाने के लिए काम करता है जैसे कि यह आपकी स्थानीय साइट पर था।

प्रॉक्सी डाउनलोड किए गए बाहरी सर्वर को बनाता है और html2canvas छवि को डाउनलोड पूरा होने के बाद ही लोड करता है।

विषय को समझने के लिए यह http://en.wikipedia.org/wiki/Same_origin_policy पढ़ें।

मैं इस प्रॉक्सी का उपयोग कैसे करूं?

वह लिंक जिसे आपने प्रॉक्सी के उपयोग के लिए सभी लिंक खर्च किए हैं (php भाषाओं में, सी # (एएसपीनेट), पायथन और वीबी (एएसपी क्लासिक))।

हो सकता है कि आपने प्रॉक्सी के लिंक पर ध्यान नहीं दिया हो, तो मैं आपको यहां बताऊंगा:
https://github.com/niklasvh/html2canvas/wiki/Proxies

नई लाइब्रेरी का उपयोग करते समय संपूर्ण रीडमे को पढ़ना हमेशा अच्छा होता है।

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

मैं जावा का उपयोग कर रहा हूँ।
आपके पास प्रॉक्सी का उपयोग करने के लिए एक उदाहरण है?

@brcontainer और जैसा कि मैंने उल्लेख किया है, CSS3 परिवर्तनों के साथ वास्तव में समस्या है, क्योंकि Google क्रोम पर चलने वाले googlemaps उनका उपयोग करते हैं, इसलिए नक्शा वर्तमान कार्यान्वयन के साथ स्क्रीन करने योग्य नहीं है। मेरा विश्वास करो, मेरे द्वारा लिखे गए प्रोजेक्ट में मुझे यह समस्या थी ...

@bkralik तो, मैं कैसे कर सकता हूँ?
क्या आपके पास कोई उदाहरण है?

मैं जावा में भी प्रोग्राम करता हूं (मैंने पहले ही PHP, C # और VB में प्रॉक्सी बनाई है), लेकिन मेरे पास जावा में प्रॉक्सी बनाने का समय नहीं है, शायद मैं इसे रविवार को ही कर सकता हूं।

इसका आवेदन जेएसपी या "जावा डेस्कटॉप" है?

@brcontainer जेएसएफ, प्राइमफेस, जावास्क्रिप्ट और जावा का उपयोग करके यह एक वेब एप्लीकेशन है

@DanielSBelo JSF फ्रेमवर्क मैंने कभी इस्तेमाल नहीं किया, मैं शुद्ध जावा में प्रोग्राम करता हूं, बिना फ्रेमवर्क के, यह नहीं जानता कि जावा भाग में कोड के साथ वर्तमान कोड को लागू करना आसान होगा या नहीं। मैं उसकी मदद करना चाहता था, लेकिन यह वास्तव में समय पर नहीं है।

[संपादित]
सीएसएस ट्रांसफॉर्म सपोर्ट के बारे में पढ़ें: https://github.com/niklasvh/html2canvas#contributing

@DanielSBelo क्या आपको इसके लिए कोई अच्छा समाधान मिला? मुझे भी यही तकलीफ़ है।

मानचित्र को कैनवास के रूप में सहेजना फ़ायरफ़ॉक्स में ठीक काम करता है, लेकिन क्रोम में मानचित्र को सहेजने में विफल रहता है। मुझे नहीं लगता कि यह सीधे परिवर्तन से संबंधित है, लेकिन अधिक संभावना है कि जिस तरह से क्रोम सीओआर को संभालता है। मैं पूरी तरह से एक जवाब खोजने की कोशिश कर रहा हूँ, हालाँकि।

@TGOlson यह वास्तव में CSS3 परिवर्तनों के साथ समस्या है, क्योंकि html2canvas की वर्तमान रिलीज़ केवल "एक स्तर" परिवर्तन को प्रस्तुत करने में सक्षम है - यह उन्हें ढेर नहीं करता है।
आप यह सत्यापित कर सकते हैं कि समस्या केवल Google मानचित्र के साथ खेलकर परिवर्तनों में है - आमतौर पर, इस तरह का स्क्रीनशॉट दिया जाता है:

(सीएसएस में, पूरा नक्शा सही ढंग से स्थित है लेकिन सीएसएस 3 को अक्षम करने के बाद ऐसा होता है)
संपूर्ण css3 ट्रांसफ़ॉर्मेशन स्टैक को लागू करने का एकमात्र समाधान है। मुझे नहीं पता, अगर यह निकलास द्वारा प्रगति पर है, लेकिन किसी को यह करना चाहिए :-)

सदस्यता लेने

मुझे भी यही समस्या हो रही है - केवल क्रोम में। मैं html2canvas-प्रॉक्सी-php का उपयोग कर रहा हूँ। अन्य ब्राउज़र ठीक काम करते हैं। नक्शे के हिस्से अभी गायब हैं.. ऐसा लगता है कि नक्शे का आकार बदलने, ओवरले जोड़ने/निकालने आदि से संबंधित है

एफवाईआई - अगर आपको कुछ मानचित्र कैप्चर कार्यक्षमता को तेज़ी से चलाने और चलाने की आवश्यकता है, तो आप हमेशा Google सड़क दृश्य या स्थिर मानचित्र API का उपयोग कर सकते हैं। मूल रूप से, वर्तमान उपयोगकर्ता जो मानचित्र पर देख रहा है उसे फिर से बनाएं ( map.getPov , आदि) फिर उस स्थिर छवि को Google से प्राप्त करें।

मुझे नहीं लगता कि दृष्टिकोण ओवरले के साथ काम करता है

मैं अभी इस मुद्दे पर ठोकर खाई है। अगर मुझे गलत नहीं लगता है, तो यह स्टैक ओवरफ्लो प्रश्न इस समस्या को प्रदर्शित करता है और मैंने सीएसएस 3 ट्रांसफॉर्म को पढ़कर और सामान्य सीएसएस पदों के रूप में लागू करके एक कामकाज की पेशकश की है।

var transform=$(".gm-style>div:first>div").css("transform")
var comp=transform.split(",") //split up the transform matrix
var mapleft=parseFloat(comp[4]) //get left value
var maptop=parseFloat(comp[5])  //get top value
$(".gm-style>div:first>div").css({ //get the map container. not sure if stable
  "transform":"none",
  "left":mapleft,
  "top":maptop,
})

शायद, css3 ट्रांसफ़ॉर्म को चेक किया जा सकता है और रेंडर करते समय स्वचालित रूप से सामान्य CSS पोजिशनिंग में परिवर्तित किया जा सकता है और फिर रेंडर करने के बाद उन्हें हटा दिया जा सकता है।

मेरे पास एक निरंतर स्क्रीन कैप्चर फ़ंक्शन है।
पृष्ठ के पूर्ण पुनः लोड के बाद काम करता है (फ़ायरफ़ॉक्स पर CTLR+R का उपयोग करके)

यहां मेरा कोड है, मूल रूप से यह विंडो के कैप्चर किए गए प्रिंट्सरीन की 64 बेस/पीएनजी छवि उत्पन्न करना है और अंतिम परिणाम जो मैंने डाला है यह देखने के लिए टैग करें कि यह काम करता है या नहीं।

यहाँ एक समारोह है

समारोह ebfPrintScreen(घटकनाम)
{
html2cavnas
([दस्तावेज़। निकाय],
{
लॉगिंग: सच,
कॉर्स का उपयोग करें: सच,
ऑनरेंडर: फ़ंक्शन (कैनवास)
{
img = कैनवास.toDataURL ("छवि/jpg");

                                                  console.log(img.length);
                                                  console.log(img);

                                                  var imgComp = $c(conponentName);
                                                  imgComp.img.src = img

                                          }
                      }
                );

}

मुख्य उद्देश्य Google मानचित्र मार्ग को बनने के बाद उस पर कब्जा करना है, लेकिन जैसा कि मैं कहता हूं, कभी-कभी यह काम करता है, कभी-कभी नहीं। क्या हो रहा है पर कोई सुराग?

मुझे भी यही समस्या हो रही है। मैं ज़ूम करने और चारों ओर पैन करने के बाद मानचित्र की एक छवि लेने के लिए जाता हूं और बड़े हिस्से, यहां तक ​​​​कि पूरे नक्शे में, अचानक हल्के भूरे रंग में आच्छादित हो जाते हैं। अगर किसी के पास क्रोम में इसके लिए कोई फिक्स है तो कृपया मुझे बताएं।

@mfirdaus के समाधान की कोशिश की, और यह noraml मानचित्र दृश्य के लिए काम करता है, हालांकि,

@mfirdaus के समाधान को लागू करने के बाद मैं मानचित्र दृश्य को कैप्चर करने में सक्षम था। लेकिन किसी तरह नीचे दिया गया यह कोड मानचित्र को अनुपयोगी बना रहा है (लेकिन html2canvas प्रयोग करने योग्य):

$(".gm-style>div:first>div").css({ //get the map container. not sure if stable
      "transform":"none",
      "left":mapleft,
      "top":maptop,
    })

क्या वह लाइन क्या कर रही है "पुनर्स्थापित" करने का कोई तरीका है? अभी के लिए मैं परिवर्तन कोड के साथ html2canvas फ़ंक्शन को कॉल करने के बाद मानचित्र को काम करने के लिए फिर से initMap फ़ंक्शन को कॉल कर रहा हूं।

क्या उपरोक्त स्क्रिप्ट Google मानचित्र v3 के लिए कार्य करती है?

मेरी आवश्यकता एक Google मानचित्र v3 का एक स्क्रीनशॉट लेना है जिस पर एक मार्ग खींचा गया है।

यह फ़ायरफ़ॉक्स में अच्छी तरह से काम करता है, लेकिन क्रोम में कोई मार्कर या मार्ग नहीं है। मैं पहले से ही कस्टम मार्कर का उपयोग कर रहा हूं।

मुझे डिबगिंग में कठिनाई होती है क्योंकि कंसोल में कोई त्रुटि नहीं है और लॉगिंग इतनी सीमित है।

क्या किसी ने क्रोम में इस मुद्दे को हल किया है? मैंने दो भाषाओं में प्रॉक्सी स्क्रिप्ट की कोशिश की है, लेकिन न तो कोई फर्क पड़ता है।

मेरे पास एक समान समस्या है, मैं इस कोड को इंटरनेट से कॉपी/कट करता हूं:

  if($.browser.safari) {// Fix for Chrome
    var transform=$(".gm-style>div:first>div").css("transform");
    var comp=transform.split(","); //split up the transform matrix
    var mapleft=parseFloat(comp[4]); //get left value
    var maptop=parseFloat(comp[5]);  //get top value
    $(".gm-style>div:first>div").css({ //get the map container. not sure if stable
      "transform":"none",
      "left":mapleft,
      "top":maptop,
    });
  }

  html2canvas([$("#map")[0]], {
    logging: false,
    useCORS: true,
    onrendered: function (canvas) {
      $('#screenshot').after(canvas);

      if($.browser.safari) {// Fix for Chrome
        $(".gm-style>div:first>div").css({
          left:0,
          top:0,
          "transform":transform
        });
      }
    }
  });

यह काम करता है लेकिन अगर मैं मानचित्र को हैंडलर के साथ ले जाता हूं तो यह काम नहीं करता है। मैं मार्करों, बहुभुजों आदि के साथ काम करता हूं। यह फ़ायरफ़ॉक्स में भी काम करता है (मैं मानचित्र को स्थानांतरित कर सकता हूं) लेकिन क्रोम में नहीं।

कोई विचार ?

फिक्स्ड!

क्रोम के लिए फिक्स I बेवकूफी से कॉपी/पेस्ट किया गया था ट्रिगर नहीं किया गया था।

इसे मैने किया है :

  if(window.chrome) {// Fix for Chrome
    var transform=$(".gm-style>div:first>div").css("transform");
    var comp=transform.split(","); //split up the transform matrix
    var mapleft=parseFloat(comp[4]); //get left value
    var maptop=parseFloat(comp[5]);  //get top value
    $(".gm-style>div:first>div").css({ //get the map container. not sure if stable
      "transform":"none",
      "left":mapleft,
      "top":maptop,
    });
  }

  html2canvas([$("#map > div.g-map-canvas > div > div > div:nth-child(1)")[0]], {
    logging: false,
    useCORS: true,
    onrendered: function (canvas) {
      $('#screenshot').after(canvas);

      if(window.chrome) {// Fix for Chrome
        $(".gm-style>div:first>div").css({
          left:0,
          top:0,
          "transform":transform
        });
      }
    }
  });

html2canvas में बहुत लंबा चयनकर्ता बिना बटन और विकल्पों के मानचित्र के लिए है।

मैं अब काम करता हूं, धन्यवाद।

धन्यवाद @GCorbel यह आपके समाधान के साथ बहुत अच्छा काम करता है।

उपरोक्त वर्कअराउंड मानचित्र को प्रस्तुत करने के लिए काम करते हैं लेकिन शीर्ष नियंत्रण या तो गायब हैं या गलत स्थिति में हैं। कोई विचार?

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

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

@niklasvh मैं पुष्टि कर सकता हूं कि यह अभी भी नवीनतम संस्करण के साथ एक मुद्दा है। यहाँ एक पहेली है जिसे मैंने इस मुद्दे का परीक्षण करते समय बनाया है: http://jsfiddle.net/9agom947/4/

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

इस सूत्र में दिए गए सुधार से समस्या का समाधान होता प्रतीत होता है।

@ आनंद-प्रियाना मैंने आपके जेएसफ़िल्ड की कोशिश की है, हालांकि फिक्स अब और काम नहीं कर रहा है। क्या कोई और उपाय है?

अग्रिम में धन्यवाद।

ऐसा लगता है कि हाल ही में जारी किए गए Google मानचित्र (v3.32) के नवीनतम संस्करण में एक नया प्रयोगात्मक रेंडरर है।
https://developers.google.com/maps/documentation/javascript/releases

इससे फिक्स टूट गया है। मैंने केवल एक त्वरित परीक्षण किया, लेकिन ऐसा लगता है कि अब सभी ब्राउज़रों में चीजें समान रूप से टूट गई हैं (न केवल क्रोम के लिए), तो उम्मीद है कि html2canvas के अगले संस्करण में इसे ठीक करना आसान हो जाएगा?

लेकिन एक त्वरित कार्य-आसपास जीएमएपी के पुराने संस्करण का उपयोग करना होगा, जहां फिक्स अभी भी ठीक काम कर रहा होगा।

@ आनंद-प्रियाना हाँ मैंने जीएमएपी डाउनग्रेड किया, काम किया, धन्यवाद।

धन्यवाद @ आनंद-प्रियाना! मैंने पिछले हफ्ते यह काम किया था फिर इसे एक नए मंच पर ले जाया गया और मुझे लगा कि इस कदम ने इसे तोड़ दिया। मैं पूरी तरह से एक चूहे के छेद के नीचे जा रहा था, यह मानते हुए कि नया वातावरण अपराधी था। मैंने डाउनग्रेड करके 3.30 कर दिया और सब ठीक है।

ऐसा लगता है कि गूगल मैप्स के नए संस्करण में ट्रांसफॉर्म को अलग-अलग डिव पर लागू किया गया है। @GCorbel के समाधान का उपयोग करना लेकिन इस चयनकर्ता के साथ (".gm-style>div:first>div:first>div:last>div") काम करने लगता है। हालांकि मैंने अभी तक इसका पूरी तरह से परीक्षण नहीं किया है।

@rSensation टिप ने नवीनतम संस्करण में एक आकर्षण की तरह काम किया। शुक्रिया!

हम्म ऐसा लगता है कि यह समस्या मेरे लिए वापस आ गई है, मुझे इस मुद्दे को देखने के लिए मानचित्र को पैन करना होगा और जब मैं स्क्रीन को पकड़ने के लिए Html2Canvas को पैन और उपयोग करता हूं, तो कुछ क्षेत्र खाली ग्रे के रूप में दिखाई देते हैं?

आप में से किसी के लिए जो ओवरले परतों को काटने का काम कर रहा है --
@GCorbel का चयनकर्ता केवल Google मानचित्र परत को रूपांतरित करता है। यदि आपके पास अन्य ओवरले हैं, तो आपको यह पता लगाना होगा कि वे किस डिव में हैं (उदाहरण के लिए, $('.gm-style>div:first>div:first>div:first>div:first>div') मेरे ओवरले डिव में से एक था और उसी ट्रांसफ़ॉर्म को सीएसएस में लागू करें।

@mylesboone आपने कैसे पाया कि ओवरले परतें कौन सी div हैं? मैं वर्तमान में ओवरले परतों को काटे जाने के समान मुद्दे से जूझ रहा हूं।

मैं इस समय ओवरले परतों के रूप में GmapMarker और GmapPolyline का उपयोग कर रहा हूं।

@sunghunOW
एक समाधान यहां पाया जा सकता है https://github.com/niklasvh/html2canvas/issues/1568
आप अपने ब्राउज़र के निरीक्षण उपकरण का उपयोग यह देखने के लिए कर सकते हैं कि किस div को परिवर्तन की आवश्यकता होगी।

मुझे मिला सबसे अच्छा समाधान:

    html2canvas($('.gm-style>div:eq(0)')[0],{
        useCORS: true,
        allowTaint: true,
        async:false,
    }).then(canvas => {document.body.appendChild(canvas)});

    html2canvas($('.gm-style>div:eq(0)')[0],{
        useCORS: true,
        allowTaint: true,
        async:false,
    }).then(canvas => {document.body.appendChild(canvas)});

यह मुझे कैनवास देता है परिभाषित नहीं है .. क्या आइटम के चयनकर्ता को बॉक्स से बाहर शब्द चाहिए?

@ हसीदा धन्यवाद! आपका चयनकर्ता मेरे लिए चाल चल रहा था!

यहां मेरा थोड़ा संशोधित चयनकर्ता है जो काम करता है (कम से कम मेरे लिए, हाहा)

const div = document.querySelector('#map > div:first-of-type')

html2canvas(div, {})

हालांकि, अब यह Google लोगो को काट रहा है जिसे नियम और शर्तों का पालन करने के लिए हमेशा दिखाना पड़ता है :(

ठीक है, मैं सिर्फ नोड या कुछ और क्लोन करूँगा। मैं कुछ समय से इस नक्शे से लड़ रहा हूँ :D

यह मेरे लिए काम करता है:

$('#snapshot').on('click',function () {
    html2canvas(document.querySelector('.gm-style'), 
           {useCORS:true, allowTaint: true,async:false} ).then(canvas => {
            document.body.appendChild(canvas)
    });
});

रिक्त मानचित्र या कैनवास उत्पन्न करने में त्रुटि के साथ समस्या मुश्किल थी, लेकिन अंततः मेरे लिए जो तय किया गया वह इस कॉन्फ़िगरेशन को जोड़ रहा था:

ignoreElements: (node) => {
        return node.nodeName === 'IFRAME';
      }

html2canvas(mapWrapper, {
      useCORS: true,
      allowTaint: false,
      ignoreElements: (node) => {
        return node.nodeName === 'IFRAME';
      }
    }).then(canvas => {
      const url = canvas.toDataURL('image/png');
      saveAs(url, 'image3.png');
      window.URL.revokeObjectURL(url);
    });

@imlinus और @hseeda को धन्यवाद! यह चयनकर्ता मेरे लिए पूरी तरह से काम करता है! और यह गूगल लोगो भी रखता है, धन्यवाद!

@ हसीदा धन्यवाद! आपका चयनकर्ता मेरे लिए चाल चल रहा था!

यहां मेरा थोड़ा संशोधित चयनकर्ता है जो काम करता है (कम से कम मेरे लिए, हाहा)

const div = document.querySelector('#map > div:first-of-type')

html2canvas(div, {})

हालांकि, अब यह Google लोगो को काट रहा है जिसे नियम और शर्तों का पालन करने के लिए हमेशा दिखाना पड़ता है :(

ठीक है, मैं सिर्फ नोड या कुछ और क्लोन करूँगा। मैं कुछ समय से इस नक्शे से लड़ रहा हूँ :D