<p>html2canvas तत्व में स्थित छवियों को प्रस्तुत नहीं करता है</p>

नमस्ते।
मुझे भी ठीक यही समस्या है।

यहाँ वही मुद्दा।
मैं एक ट्वीट का शॉट लेने की कोशिश कर रहा हूं, और संलग्न छवि नहीं आती है।
छवि संलग्न।

मेरा मानना ​​​​है कि अन्य साइटों की छवियां डिफ़ॉल्ट रूप से अवरुद्ध हैं क्योंकि यह "एचटीएमएल 5 कैनवास को खराब करती है"। यहां वह विकल्प दिया गया है जिसका उपयोग आपको रेंडरर को कॉल करते समय करने की आवश्यकता है:

विशेषता: allowTaint
प्रकार: बूलियन
डिफ़ॉल्ट: गलत
विवरण: क्या क्रॉस-ओरिजिनल छवियों को कैनवास को कलंकित करने की अनुमति देनी है

इसे यहां मिला: https://html2canvas.hertzen.com/documentation.html।

एक ही समस्या है....
और मेरे चित्र उसी ओर से आ रहे हैं

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

अपने स्क्रीनशॉट में सभी छवियों को देखने के लिए अनुमति दें विकल्प डालें

html2canvas(document.getElementById('invoice-panel'), { letterRendering: 1, allowTaint : true, onrendered : function (canvas) { } });

मेरे पास div तत्व की सूची है।
जब मैं आईडी द्वारा प्रत्येक div को कैप्चर करने का प्रयास करता हूं, तो कुछ div आधा भाग कैप्चर किया जाता है, और कुछ div की कैप्चर छवि रिक्त होती है।
क्या आप मुझे बता सकते हैं कि समस्या क्या है और मैं इसे कैसे ठीक कर सकता हूं। @

वही समस्या।समाधान के लिए धन्यवाद।

html2canvas बेस 64 प्रारूप में दिए गए स्रोत को परिवर्तित नहीं कर रहा है। मैंने लॉग प्रिंट कर लिया है। कृप्या सहायता करे

1283ms html2canvas: दस्तावेज़ क्लोन किया गया html2canvas.js:1487
3936ms html2canvas: 601 x 965 html2canvas.js:1487 आकार के साथ आरंभिक कैनवास रेंडरर
3937ms html2canvas: NodeParser प्रारंभ करना html2canvas.js:1487
4014ms html2canvas: फ़ेच किए गए नोड, कुल: 10 html2canvas.js:1487
4015ms html2canvas: अतिप्रवाह क्लिप की गणना करें html2canvas.js:1487
4034ms html2canvas: चित्र प्राप्त करना प्रारंभ करें html2canvas.js:1487
4044ms html2canvas: जोड़ा गया इमेज #1 डेटा: इमेज/जेपीईजी;बेस64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pL html2canvas.js:1487
4047ms html2canvas: जोड़ा गया चित्र #2 डेटा:छवि/जेपीईजी;बेस64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aH html2canvas.js:1487
4051ms html2canvas: छवियों की खोज समाप्त html2canvas.js:1487
4052ms html2canvas: सफलतापूर्वक लोड किया गया चित्र #1
ImageContainer {src: " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD… AKKKACiiigAooooAKKKKACiiigAooooAKKKKKACiiigD/2Q==", इमेज: img, दागी: शून्य, वादा: h}
html2canvas.js:1487
4056ms html2canvas: चित्र सफलतापूर्वक लोड किया गया #2
इमेजकंटेनर {src: " डेटा: इमेज/जेपीईजी; बेस 64 ,/9j/4AAQSkZJRgABAQAAAQABAAD... 4PXOaUMB0/GlrcdiYtkcc/WkzjqfwqMPxzxRvAz3oSCx//9k=", इमेज: img, दागी}: शून्य, वादा:
html2canvas.js:1487
4059ms html2canvas: छवियों को लोड किया गया, html2canvas.js:1487 . को पार्स करना शुरू किया गया
4060ms html2canvas: स्टैकिंग संदर्भ बनाना html2canvas.js:1487
4064ms html2canvas: स्टैकिंग संदर्भों को क्रमबद्ध करना html2canvas.js:1487
4066ms html2canvas: 9 वस्तुओं के साथ बनाई गई कतार प्रस्तुत करना html2canvas.js:1487
4104ms html2canvas: प्रतिपादन समाप्त html2canvas.js:1487
4109ms html2canvas: क्रॉपिंग कैनवास यहां: बाएं: 28 शीर्ष: 529 चौड़ाई: 545 ऊंचाई: 0 html2canvas.js:1487
4111ms html2canvas: 545 चौड़ाई और ऊंचाई 0 के साथ x 28 और y 529 . के साथ परिणामी फसल

html2canvsas बेस 64 स्रोत के साथ दी गई छवियों को प्रस्तुत नहीं कर रहा है, कॉल "ऑनरेंडर" पर वापस नहीं आ रहा है
समारोह। कृप्या सहायता करे

1283ms html2canvas: दस्तावेज़ क्लोन किया गया html2canvas.js:1487
3936ms html2canvas: 601 x 965 html2canvas.js:1487 आकार के साथ आरंभिक कैनवास रेंडरर
3937ms html2canvas: NodeParser प्रारंभ करना html2canvas.js:1487
4014ms html2canvas: फ़ेच किए गए नोड, कुल: 10 html2canvas.js:1487
4015ms html2canvas: अतिप्रवाह क्लिप की गणना करें html2canvas.js:1487
4034ms html2canvas: चित्र प्राप्त करना प्रारंभ करें html2canvas.js:1487
4044ms html2canvas: जोड़ा गया इमेज #1 डेटा: इमेज/जेपीईजी;बेस64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pL html2canvas.js:1487
4047ms html2canvas: जोड़ा गया चित्र #2 डेटा:छवि/जेपीईजी;बेस64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aH html2canvas.js:1487
4051ms html2canvas: छवियों की खोज समाप्त html2canvas.js:1487
4052ms html2canvas: सफलतापूर्वक लोड किया गया चित्र #1
ImageContainer {src: " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD… AKKKACiiigAooooAKKKKACiiigAooooAKKKKKACiiigD/2Q==", इमेज: img, दागी: शून्य, वादा: h}
html2canvas.js:1487
4056ms html2canvas: चित्र सफलतापूर्वक लोड किया गया #2
इमेजकंटेनर {src: " डेटा: इमेज/जेपीईजी; बेस 64 ,/9j/4AAQSkZJRgABAQAAAQABAAD... 4PXOaUMB0/GlrcdiYtkcc/WkzjqfwqMPxzxRvAz3oSCx//9k=", इमेज: img, दागी}: शून्य, वादा:
html2canvas.js:1487
4059ms html2canvas: छवियों को लोड किया गया, html2canvas.js:1487 . को पार्स करना शुरू किया गया
4060ms html2canvas: स्टैकिंग संदर्भ बनाना html2canvas.js:1487
4064ms html2canvas: स्टैकिंग संदर्भों को क्रमबद्ध करना html2canvas.js:1487
4066ms html2canvas: 9 वस्तुओं के साथ बनाई गई कतार प्रस्तुत करना html2canvas.js:1487
4104ms html2canvas: प्रतिपादन समाप्त html2canvas.js:1487
4109ms html2canvas: क्रॉपिंग कैनवास यहां: बाएं: 28 शीर्ष: 529 चौड़ाई: 545 ऊंचाई: 0 html2canvas.js:1487
4111ms html2canvas: 545 चौड़ाई और ऊंचाई 0 के साथ x 28 और y 529 . के साथ परिणामी फसल

@SebasAlvarez - allowTaint विकल्प अब और काम नहीं करता है। क्या यह अभी भी आपके लिए काम करता है?

@SebasAlvarez , @sandeepnagra :
मैं नए टैब में छवि स्क्रीनशॉट के लिए इस कोड का उपयोग कर रहा हूं, लेकिन छवि प्रतिपादन नहीं कर रहा है और मैं "एक llowTaint: true " से थक गया हूं, यह केवल उसी विंडो के अंदर काम कर रहा है लेकिन नए टैब में नहीं।
यह मेरा कोड है:
फ़ंक्शन रेंडर () {
html2canvas(document.body, { allowTaint : true,
ऑनरेंडर: फ़ंक्शन (कैनवास) {
document.body.appendChild (कैनवास);
window.open(canvas.toDataURL ());
}
});
}
क्या आप मुझे बता सकते हैं कि समस्या क्या है, आप इसे कैसे ठीक कर सकते हैं ??

@venkateshduddu - क्या आप स्क्रीनशॉट लेने से पहले फ़ोकस को नए टैब पर स्थानांतरित कर रहे हैं?

@ संदीपनगर - संदीप नहीं, मैं सिर्फ क्लिक इवेंट का उपयोग कर रहा हूं। एक और बात स्क्रीनशॉट काम कर रहा है अगर मैं स्थानीय छवि पथ का उपयोग करता हूं लेकिन सर्वर पथ नए टैब में काम नहीं कर रहा है।

@venkateshduddu - एक क्लिक ईवेंट फोकस को स्वचालित रूप से नए टैब पर स्थानांतरित नहीं करेगा, आपको इसे ट्रिगर करना होगा। तो पहले कोशिश करें, मुझे 100% यकीन है कि यह आपकी समस्या का समाधान करेगा।

सर्वर पथ के संबंध में, क्या वह नेटवर्क ड्राइव प्रमाणित है? यदि हाँ, तो क्या आप नेटवर्क ड्राइव पर फ़ाइलें अपलोड करने से पहले प्रमाणीकरण कर रहे हैं? यदि आप उन्हें S3 बकेट में अपलोड करना चाहते हैं तो यह पूरी तरह से अलग कहानी है।

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

अगर मैंने allowTaint का इस्तेमाल किया तो डाउनलोड विकल्प काम नहीं किया। कृपया सहायता कीजिए

एक ही समस्या है....
और मेरे चित्र उसी ओर से आ रहे हैं

मैंने अभी इस समस्या को ठीक किया है।
pls विकल्प 'useCORS' को 'true' में सक्षम करें
नीचे दिए गए कोड:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

बहुत बहुत धन्यवाद @Sotyoyo , मेरी बग को उपरोक्त कोड के साथ ठीक किया गया था। धन्यवाद धन्यवाद

@Sotyoyo बहुत बहुत धन्यवाद भाई, भगवान आपका भला करे <3

@Sotyoyo बहुत बहुत धन्यवाद, यह मेरे लिए काम करता है :)

छवि प्रस्तुत नहीं हो रही है क्या मेरे कोड में कोई समस्या है?

html2canvas(document.getElementById("html-2-pdfwrapper"), {
लॉगिंग: सच,
पत्र प्रतिपादन: 1,
अनुमति दें: झूठा,
कॉर्स का उपयोग करें: सच,
ऑनरेंडर: फ़ंक्शन (कैनवास) {
var img = कैनवास.toDataURL ('छवि/पीएनजी');
वर डॉक्टर = नया जेएसपीडीएफ ();
doc.addImage (आईएमजी, 'जेपीईजी', 20, 20);
doc.save ('test2.pdf');
}
});

एक ही समस्या है....
और मेरे चित्र उसी ओर से आ रहे हैं

मैंने अभी इस समस्या को ठीक किया है।
pls विकल्प 'useCORS' को 'true' में सक्षम करें
नीचे दिए गए कोड:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

यही काम है! धन्यवाद!

एक ही समस्या है....
और मेरे चित्र उसी ओर से आ रहे हैं

मैंने अभी इस समस्या को ठीक किया है।
pls विकल्प 'useCORS' को 'true' में सक्षम करें
नीचे दिए गए कोड:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

यह सही है /

html2canvas(document.querySelector("#id-of-element"),{ loging: true, letterRendering: 1, allowTaint: false, useCORS: true}).then(canvas => {
var imgData = कैनवास.toDataURL ('छवि/जेपीईजी');
});

अपने स्क्रीनशॉट में सभी छवियों को देखने के लिए अनुमति दें विकल्प डालें

html2canvas(document.getElementById('invoice-panel'), { letterRendering: 1, allowTaint : true, onrendered : function (canvas) { } });

धन्यवाद। यह बढ़िया काम करता है।

लेकिन मैं छवि शैली को कैनवास पर क्लोन नहीं कर सकता

नीचे दिए गए विकल्पों का उपयोग करने के बाद भी मुझे एक ही समस्या का सामना करना पड़ रहा है, मेरा कोड है।
वर तत्व = document.querySelector("#map-image-id");
html2canvas(तत्व, {
लॉगिंग: सच,
पत्र प्रतिपादन: 1,
अनुमति दें: झूठा,
कॉर्स का उपयोग करें: सच
}).फिर (कैनवासएल्म => {
वर छवि प्रकार = "छवि/पीएनजी";
var imageData = कैनवासElm.toDataURL(imageType);
var src = encodeURI (इमेजडेटा);
कंसोल.लॉग ("src", src);
कंसोल.लॉग ("इमेज डेटा", इमेजडाटा);

नीचे दिए गए विकल्पों का उपयोग करने के बाद भी मुझे एक ही समस्या का सामना करना पड़ रहा है, मेरा कोड है।
वर तत्व = document.querySelector("#map-image-id");
html2canvas(तत्व, {
लॉगिंग: सच,
पत्र प्रतिपादन: 1,
अनुमति दें: झूठा,
कॉर्स का उपयोग करें: सच
}).फिर (कैनवासएल्म => {
वर छवि प्रकार = "छवि/पीएनजी";
var imageData = कैनवासElm.toDataURL(imageType);
var src = encodeURI (इमेजडेटा);
कंसोल.लॉग ("src", src);
कंसोल.लॉग ("इमेज डेटा", इमेजडाटा);

आपको भी। क्या आपने इसे हल किया है?

नीचे दिए गए विकल्पों का उपयोग करने के बाद भी मुझे एक ही समस्या का सामना करना पड़ रहा है, मेरा कोड है।
वर तत्व = document.querySelector("#map-image-id");
html2canvas(तत्व, {
लॉगिंग: सच,
पत्र प्रतिपादन: 1,
अनुमति दें: झूठा,
कॉर्स का उपयोग करें: सच
}).फिर (कैनवासएल्म => {
वर छवि प्रकार = "छवि/पीएनजी";
var imageData = कैनवासElm.toDataURL(imageType);
var src = encodeURI (इमेजडेटा);
कंसोल.लॉग ("src", src);
कंसोल.लॉग ("इमेज डेटा", इमेजडाटा);

मेरे साथ एक ही समस्या कोई मदद

मैं वही मुद्दा देख रहा हूं। मैं क्या गलत कर रहा हूं?

html2canvas(document.getElementById(<id>), {
    logging: true,
    letterRendering: 1,
    allowTaint: false,
    useCORS: true
}).then(result => {
    var img = result.toDataURL("image/png");
    savePng(img);
});

यदि आप <img src-"..." /> शामिल करना चाहते हैं तो नीचे भी काम करता है:

html2canvas(report, {letterRendering: 1, allowTaint: true, useCORS: true})
            .then((canvas) => {      
                const imgData = canvas.toDataURL('image/png');
               // const pdf = new jsPDF();
               // pdf.addImage(imgData, 'PNG', 10, 10);
                //pdf.save("foo.pdf");  
            });

मेरी सामग्री में वह छवि है जो Aws.s3() से आती है। ऊपर उल्लिखित टिप्पणियाँ मेरे मामले के लिए काम नहीं कर रही हैं।

html2canvas (सामग्री, {लेटररेंडरिंग: 1, allowTaint: false, useCORS: true})
तब (कैनवास => {
कास्ट imgData = कैनवास.toDataURL ('छवि/पीएनजी');
कंसोल.लॉग (imgData);
कॉन्स्ट पीडीएफ = नया जेएसपीडीएफ ();
pdf.addImage (imgData, 'PNG', 10, 10, कैनवास.चौड़ाई, कैनवास.हाइट);
पीडीएफ.सेव ('डाउनलोड.पीडीएफ');
});

आउटपुट कैनवास में छवि के बजाय केवल एक रिक्त बॉक्स होता है। किसी के पास मेरे मामले का समाधान है?

मेरी सामग्री में वह छवि है जो Aws.s3() से आती है। ऊपर उल्लिखित टिप्पणियाँ मेरे मामले के लिए काम नहीं कर रही हैं।

html2canvas (सामग्री, {लेटररेंडरिंग: 1, allowTaint: false, useCORS: true})
तब (कैनवास => {
कास्ट imgData = कैनवास.toDataURL ('छवि/पीएनजी');
कंसोल.लॉग (imgData);
कॉन्स्ट पीडीएफ = नया जेएसपीडीएफ ();
pdf.addImage (imgData, 'PNG', 10, 10, कैनवास.चौड़ाई, कैनवास.हाइट);
पीडीएफ.सेव ('डाउनलोड.पीडीएफ');
});

आउटपुट कैनवास में छवि के बजाय केवल एक रिक्त बॉक्स होता है। किसी के पास मेरे मामले का समाधान है?

यहाँ एक ही मुद्दा। S3 बकेट से आने वाली छवियां

एक ही समस्या है....
और मेरे चित्र उसी ओर से आ रहे हैं

मैंने अभी इस समस्या को ठीक किया है।
pls विकल्प 'useCORS' को 'true' में सक्षम करें
नीचे दिए गए कोड:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

धन्यवाद
यह मेरे लिए काम करता है ❤❤

मूल से ' https://image/logo लिंक' पर छवि तक पहुंच ' http://localhost : 3000' को CORS नीति द्वारा अवरुद्ध कर दिया गया है: अनुरोधित संसाधन पर कोई 'पहुंच-नियंत्रण-अनुमति-उत्पत्ति' शीर्षलेख मौजूद नहीं है।
क्या यही कारण है कि मेरा लोगो पीडीएफ फाइल में नहीं दिख रहा है।
सीएसएस के साथ सभी टेक्स्ट को लागू करें और ब्रांड लोगो जो मेरे स्थिर फ़ोल्डर में है, आ रहा है।
कृपया उत्तर दें इस पर सहायता की आवश्यकता है मैं इसे 2 सप्ताह से अधिक समय से कोशिश कर रहा हूं।

यहां आने वाले किसी भी व्यक्ति के लिए, कई चीजों की कोशिश करने के बाद, मुझे पता चला कि बाहरी संसाधनों (जैसे S3 बाल्टी) से चित्र प्राप्त करने के लिए, आपको html2canvas के लिए useCORS = true दोनों को सक्षम करना होगा, और S3 से दी गई छवियों पर CORS नीति को सक्षम करना होगा।

मैंने इसे html2canvas प्रॉक्सी का उपयोग करके हल किया। आप यहां उपयोग और परीक्षण के बारे में कुछ विवरण देख सकते हैं:
https://github.com/zeusstl/html2canvas-proxy-nodejs