Html2canvas: दस्तावेज़ का मुख्य भाग 30,000px से अधिक लंबा होने पर किसी भी तत्व के लिए एक रिक्त छवि देता है।

को निर्मित 31 मई 2016 · 16टिप्पणियाँ · स्रोत: niklasvh/html2canvas

दस्तावेज़ का मुख्य भाग 30,000px से अधिक होने पर लाइब्रेरी एक खाली छवि देता है। आप १०० x १०० के एक तत्व को पकड़ने की कोशिश करेंगे। लेकिन आपको एक लंबे शरीर पर तत्व की एक खाली छवि मिलती है।

यहां एक पहेली है जो इस त्रुटि को प्रदर्शित करती है।

https://jsfiddle.net/fvo1xh8b/2/

आप शरीर का आकार 30,000 से कम बदल सकते हैं और यह ठीक काम करता है।

Needs More Information

स्रोत

charlie-lk

सबसे उपयोगी टिप्पणी

@niklasvh यह एक कठिन है लेकिन वास्तव में यह कैनवास आकार की सीमाओं के कारण है। मुझे लगता है कि सही व्यवहारों को लागू करने के तरीके पर चर्चा करने के लिए इसे फिर से खोलने की जरूरत है। निश्चित रूप से एक सफेद धुली हुई छवि सही व्यवहार नहीं है।

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

मेरे मामले में मैं पूरे शरीर को क्लोन कर रहा हूं और अधिकतम चौड़ाई/ऊंचाई सेट कर रहा हूं: html2canvas(el, {height: 3000, width: 3000}) ।

toadkicker 10 अक्तू॰ 2018

👍9 ❤2 🎉2 👎1

सभी 16 टिप्पणियाँ

मेरे पास आपके जैसा ही मुद्दा है। क्या आपको इसका कोई समाधान मिला है?

Sebastianvarv 15 फ़र॰ 2017

http://stackoverflow.com/questions/37520013/html2canvas-returns-invalid-image-when-the-body-height-is-more-than-30000-pixels

charlie-lk 15 फ़र॰ 2017

एम्म, मुझे एक ही समस्या मिली, लेकिन अंत में, मुझे पता चला!
मेरे मामले में, मेरा समाधान यहां है:
अपने शरीर के तत्व में एक आईफ्रेम लगाएं, जैसे

<html>
  <head>
  #canvas_handler {
   position:absolute;
   left: -10000px;
  }
  </head>
  <body>
  <iframe id="canvas_handler" />
  </body>
</html>

और प्रत्येक तत्व जिसे आपको कैनवास में छुपाने की आवश्यकता है, आप कॉपी कर सकते हैं और उन्हें इस आईफ्रेम में डाल सकते हैं, और html2canvas का उपयोग कर सकते हैं, और फिर इसे हटा सकते हैं, इस तरह

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.appendChild(copy_ele);
canvas_handler.style.height = origin_ele.scrollHeight;
canvas_handler.style.width = origin_ele.scrollWidth;
html2canvas(copy_ele, {
      useCORS: true,
     }).then((canvas) => {
       // do your things
     });
canvas_handler.removeChild(table_ele);

netweng 25 अक्तू॰ 2017

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

niklasvh 12 दिस॰ 2017

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

no-response[bot] 12 दिस॰ 2017

हाय जब मैं आंतरिक आईपी कैमरे के साथ एक आईफ्रेम स्क्रीन करने का प्रयास करता हूं, तो यह एक शून्य छवि लौटाता है, कृपया क्या आप मेरी मदद कर सकते हैं?

AntonioDilorenzo 21 अग॰ 2018

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

toadkicker 10 अक्तू॰ 2018

👍9 ❤2 🎉2 👎1

@toadkicker भाई, ली है , बहुत बहुत धन्यवाद

leandrosouza0786 26 सित॰ 2019

@toadkicker धन्यवाद!

Liberateur 24 दिस॰ 2019

एम्म, मुझे एक ही समस्या मिली, लेकिन अंत में, मुझे पता चला!
मेरे मामले में, मेरा समाधान यहां है:
अपने शरीर के तत्व में एक आईफ्रेम लगाएं, जैसे
<html>
  <head>
  #canvas_handler {
   position:absolute;
   left: -10000px;
  }
  </head>
  <body>
  <iframe id="canvas_handler" />
  </body>
</html>
और प्रत्येक तत्व जिसे आपको कैनवास में छुपाने की आवश्यकता है, आप कॉपी कर सकते हैं और उन्हें इस आईफ्रेम में डाल सकते हैं, और html2canvas का उपयोग कर सकते हैं, और फिर इसे हटा सकते हैं, इस तरह
const copy_ele = origin_ele.cloneNode(true);
canvas_handler.appendChild(copy_ele);
canvas_handler.style.height = origin_ele.scrollHeight;
canvas_handler.style.width = origin_ele.scrollWidth;
html2canvas(copy_ele, {
      useCORS: true,
     }).then((canvas) => {
       // do your things
     });
canvas_handler.removeChild(table_ele);

मैंने इस विधि की कोशिश की, लेकिन बिल्कुल काम नहीं किया। मेरे रास्ते में, नीचे दिए गए कोड के साथ काम करेगा:

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});

और यदि आप अपनी सीएसएस शैली को वर्तमान दस्तावेज़ में लागू करना चाहते हैं, तो आपको शैली को आईफ्रेम में कॉपी करने की भी आवश्यकता है:

// add style
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'your_style_file_url.css';
canvas_handler.contentDocument.head.appendChild(link);

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});

ricosmall 16 मार्च 2020

फिर से यह ब्राउज़र में ही एक सीमा है और यह पुस्तकालय त्रुटि को सही ढंग से नहीं संभालता है। कैप्चर किए गए पिक्सेल की संख्या को सीमित करने के अलावा कोई कोडिंग समाधान इसे नहीं बदलेगा।

toadkicker 16 मार्च 2020

एम्म, मुझे एक ही समस्या मिली, लेकिन अंत में, मुझे पता चला!
मेरे मामले में, मेरा समाधान यहां है:
अपने शरीर के तत्व में एक आईफ्रेम लगाएं, जैसे
<html>
  <head>
  #canvas_handler {
   position:absolute;
   left: -10000px;
  }
  </head>
  <body>
  <iframe id="canvas_handler" />
  </body>
</html>
और प्रत्येक तत्व जिसे आपको कैनवास में छुपाने की आवश्यकता है, आप कॉपी कर सकते हैं और उन्हें इस आईफ्रेम में डाल सकते हैं, और html2canvas का उपयोग कर सकते हैं, और फिर इसे हटा सकते हैं, इस तरह
const copy_ele = origin_ele.cloneNode(true);
canvas_handler.appendChild(copy_ele);
canvas_handler.style.height = origin_ele.scrollHeight;
canvas_handler.style.width = origin_ele.scrollWidth;
html2canvas(copy_ele, {
      useCORS: true,
     }).then((canvas) => {
       // do your things
     });
canvas_handler.removeChild(table_ele);
मैंने इस विधि की कोशिश की, लेकिन बिल्कुल काम नहीं किया। मेरे रास्ते में, नीचे दिए गए कोड के साथ काम करेगा:
const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});
और यदि आप अपनी सीएसएस शैली को वर्तमान दस्तावेज़ में लागू करना चाहते हैं, तो आपको शैली को आईफ्रेम में कॉपी करने की भी आवश्यकता है:
// add style
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'your_style_file_url.css';
canvas_handler.contentDocument.head.appendChild(link);

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});

मेरे मामले में, सभी तत्व svg या इनलाइन शैली हैं, इसलिए मुझे स्टाइलशीट जोड़ने की आवश्यकता नहीं है। लेकिन हाँ, यदि आवश्यक हो तो आपको अपनी स्टाइलशीट जोड़नी चाहिए

netweng 30 मार्च 2020

मुझे एक ही मुद्दे का सामना करना पड़ा है। मुझे मोडल विंडो (निश्चित स्थिति के साथ) से एक छवि बनाने की आवश्यकता थी। मुझे हमेशा एक सफेद छवि मिली। समस्या स्क्रॉल स्थिति में थी। यह कोड मेरे लिए काम करता है:

const el = document.getElementById('html-to-canvas-area')
const area = el.getBoundingClientRect()
html2canvas(el, {
  scrollX: 0,
  scrollY: 0,
  width: area.width,
  height: area.height
})

invisor 24 सित॰ 2020

🎉5 👍3 ❤1

मेरे लिए एक आकर्षण की तरह काम किया! चतुर समाधान के लिए धन्यवाद!

flaviostutz 30 सित॰ 2020

@invisor लाइफसेवर ! यही एकमात्र चीज है जिसने मेरे लिए काम किया।

MEGApixel23 26 अक्तू॰ 2020

ये विकल्प संबंधित मामलों को स्क्रॉल करने का समाधान भी हो सकता है

{
  scrollX: 0,
  scrollY: -window.scrollY
}

seahindeniz 9 नव॰ 2020

❤2 🎉1

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Html2canvas: दस्तावेज़ का मुख्य भाग 30,000px से अधिक लंबा होने पर किसी भी तत्व के लिए एक रिक्त छवि देता है।

सबसे उपयोगी टिप्पणी

सभी 16 टिप्पणियाँ

संबंधित मुद्दों