jquery html2canvas त्रुटि: अनचाहे त्रुटि: IndexSizeError: DOM अपवाद 1




(4)

मैं एक कैनवास पर एक div को बदलने के लिए html2canvas का उपयोग कर रहा हूँ। इस कदर:

<script src="js/libs/jquery-1.7.1.min.js"></script>
<script src="js/libs/jquery-ui-1.8.17.custom.min.js"></script>
<script src="js/html2canvas/html2canvas.js"></script>
...
<body id="body">
  <div id="demo">
    ...
  </div>
</body>
<script>
$('#demo').html2canvas({
onrendered: function( canvas ) {
  var img = canvas.toDataURL()
  window.open(img);
}
});
</script>

और मुझे यह त्रुटि मिलती है: "अनचाहे त्रुटि: इंडेक्ससिज़ आईलर: डोम अपवाद 1" में html2canvas.js:

ctx.drawImage( canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height );

क्या किसी के बारे में पता है कि क्या हो रहा है?


मुझे एक ही समस्या थी समस्या तब हुई जब मैंने एक छिपे हुए तत्व के अंदर कैनवास का उपयोग करने की कोशिश की मेरे मामले में मैं बूटस्ट्रैप मोडल और उसके अंदर कैनवास का उपयोग कर रहा हूं।

समाधान है: "तत्व के बाद कैनवास कोड लागू करें" पूरी तरह से दृश्यमान है

मेरे मामले में मुझे $('.modal').on('shown.bs.modal', function(){}) बजाय $('.modal').on('show.bs.modal', function(){}) , क्योंकि मॉडल तत्व पूरी तरह से दिखाया गया है। shown.bs.modal इवेंट; )


मैं कहूंगा कि आपके पास शायद कुछ float विशेषता है या एक डिवेल पर fixed स्थिति है जिसके कारण कंटेनर ऊंचाई 0 होने के कारण सामग्री की एक बेहतर ऊंचाई है मुझे इस समस्या से पहले कारण था क्योंकि html2canvas कंटेनर से अधिक सामग्री को संभाल नहीं सकता उदाहरण के लिए, यदि आपके पास ऐसा कुछ है:

<div>
  <img url="..." style="float: right;">
</div>

html2canvas इस त्रुटि को बढ़ाएगा क्योंकि div में 0 की ऊंचाई है जबकि आईएमजी बड़ा है। छवि सुधार की ऊंचाई बढ़ने के लिए डिज़ाइन की ऊँचाई बढ़ने के लिए संभव है।

आपके विस्तृत उत्तर के लिए धन्यवाद सैटर्निक्स, आपने मुझे यह पता लगाया कि यह कहां से आया है।

मुझे आशा है कि यह आपकी मदद कर सकता है,


यह html2canvas बग रिपोर्ट है

मैं अनचाहे त्रुटि को ठीक करने में सक्षम था : IndexSizeError: html2canvas.js फ़ाइल को पैचिंग करके DOM अपवाद 1

इसे बदलें:

ctx.drawImage(canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height);

इसके द्वारा:

var imgData = canvas.getContext("2d").getImageData(bounds.left, bounds.top, bounds.width, bounds.height);
ctx.putImageData(imgData, 0, 0);

जब भी आप एक कैनवास पर drawImage कहते हैं और आप एक छवि क्रॉप करना चाहते हैं, तो आपको 9 मानों में से गुजारना होगा।

ctx.drawImage(
imageObject,
sourceX,
sourceY,
sourceWidth,
sourceHeight,
destX,
destY,
destWidth,
destHeight);

अब बहुत सारी चीज़ें हैं! त्रुटियों को करना वास्तव में आसान है: उनसे बचने के लिए, मुझे बताएं कि कोई छवि फसल के दौरान चित्रकला कैसे चित्र करता है

कल्पना कीजिए कि कागज के एक टुकड़े पर एक वर्ग खींचें। आपके द्वारा चित्रित किए जा रहे वर्ग के शीर्ष-बाएं कोने को sourceX पिक्सल और sourceY पिक्सेल पर तैनात किया गया है, जहां 0 आपके पेपर के शीर्ष-बाएं कोने में स्थित है। आपके द्वारा चित्रित किए जा रहे वर्ग के पिक्सल में आयाम sourceWidth और sourceHeight द्वारा परिभाषित किया गया sourceHeight

आपके द्वारा परिभाषित किए गए वर्ग के अंदर की सभी चीजें अब आपके कैनवास के अंदर (पिक्सल में) destX और destY (जहां आपके कैनवास के शीर्ष-बाएं कोने में स्थित है) पर destX और destY

क्योंकि हम वास्तविक जीवन में नहीं हैं, आपके द्वारा कटौती करने वाला वर्ग बढ़ाया जा सकता है और एक अलग आयाम हो सकता है। यही कारण है कि आपको destWidth और destHeight को भी परिभाषित destWidth destHeight

यहाँ यह सब का एक चित्रमय प्रतिनिधित्व है।

अपने प्रश्न पर वापस जाने के लिए, Uncaught Error: IndexSizeError: DOM Exception 1 आमतौर पर तब दिखाई देता है जब आप जिस वर्ग को काटने की कोशिश कर रहे हैं वह कागज के वास्तविक टुकड़े से बड़ा है, या आप उस स्थिति में कागज के टुकड़े को काटने की कोशिश कर रहे हैं यह मौजूद नहीं है (जैसे sourceX = -1 , जो स्पष्ट कारणों के लिए असंभव है)।

मुझे नहीं पता है कि किन bounds.left , bounds.top और अन्य हैं, लेकिन मुझे 99.9% यकीन है कि वे गलत मूल्य हैं। उन्हें console.log करने की कोशिश करें और उन इमेज ऑब्जेक्ट के साथ तुलना करें जो आप प्रदान कर रहे हैं (इस मामले में, कैनवास)।

console.log(canvas.width);
console.log(canvas.height);
console.log(bounds.left);
console.log(bounds.top);
ecc....




html2canvas