Html2canvas: छवि टैग कैप्चर नहीं कर रहा है

आप छवियों का प्रीलोड खो रहे हैं, जो स्वयं अतुल्यकालिक है, इसलिए आपको इसे कॉलबैक में लपेटने की आवश्यकता होगी। आप शायद पुराने संस्करण का भी उपयोग कर रहे हैं, इसलिए मैं https://github.com/niklasvh/html2canvas/downloads से नवीनतम संस्करण प्राप्त करने और उसके साथ परीक्षण करने की अनुशंसा करता हूं:

html2canvas( $('table'), {
   onrendered: function( canvas ) {
        var img = canvas.toDataURL();
        $('#calendar_to_canvas').attr('src', img);
   }
});

त्वरित प्रतिक्रिया के लिए धन्यवाद, मैंने नवीनतम संस्करण डाउनलोड किया और उपरोक्त कोड की कोशिश की, यह अभी भी प्रदान किए गए कैनवास में छवि टैग नहीं दिखा रहा है। क्या मुझे कुछ याद आ रहा है, मैंने html2canvas.js, jquery.plugin.html2canvas और jQuery 1.7 का उपयोग करके जोड़ा। आपकी मदद बहुत ही सराहनिय है।

क्या आपके द्वारा प्रस्तुत किए जा रहे पृष्ठ के समान मूल के अंतर्गत होस्ट की गई छवियां हैं?

logging: true सेट करें और जांचें कि कंसोल छवियों के बारे में क्या कह रहा है, क्या वे विफल हो रहे हैं?

छवियां सही लोड हो रही हैं, कृपया नीचे लॉग देखें:

html2canvas: प्रीलोड शुरू होता है: बैकग्राउंड-इमेज ढूंढना html2canvas.js:27
html2canvas: प्रारंभ: चित्र: 1 / 1 (विफल: 0) html2canvas.js:27
html2canvas: प्रारंभ: चित्र: 2/2 (विफल: 0) html2canvas.js:27
html2canvas: प्रारंभ: चित्र: 3 / 3 (विफल: 0) html2canvas.js:27
html2canvas: प्रारंभ: चित्र: 4/4 (विफल: 0) html2canvas.js:27
html2canvas: प्रारंभ: चित्र: 5/5 (विफल: 0) html2canvas.js:27
html2canvas: प्रारंभ: चित्र: 6/6 (विफल: 0) html2canvas.js:27
html2canvas: प्रारंभ: चित्र: 7 / 7 (विफल: 0) html2canvas.js:27
html2canvas: प्रीलोड: चित्र ढूँढना html2canvas.js:27
html2canvas: प्रीलोड: हो गया। html2canvas.js:27
html2canvas: प्रारंभ: चित्र: 8 / 18 (विफल: 0) html2canvas.js:27
html2canvas: प्रारंभ: चित्र: 9/18 (विफल: 0) html2canvas.js:27
html2canvas: प्रारंभ: चित्र: 10 / 18 (विफल: 0) html2canvas.js:27
html2canvas: प्रारंभ: चित्र: 11 / 18 (विफल: 0) html2canvas.js:27
html2canvas: प्रारंभ: चित्र: 12 / 18 (विफल: 0) html2canvas.js:27
html2canvas: प्रारंभ: चित्र: 13 / 18 (विफल: 0) html2canvas.js:27
html2canvas: प्रारंभ: चित्र: 14 / 18 (विफल: 0) html2canvas.js:27
html2canvas: प्रारंभ: चित्र: 15 / 18 (विफल: 0) html2canvas.js:27
html2canvas: प्रारंभ: चित्र: 16 / 18 (विफल: 0) html2canvas.js:27
html2canvas: प्रारंभ: चित्र: 17 / 18 (विफल: 0) html2canvas.js:27
html2canvas: प्रारंभ: चित्र: 18 / 18 (विफल: 0) html2canvas.js:27
छवियों को लोड करना समाप्त: # 18 (विफल: 0) html2canvas.js:27

कैनवास से छवि डेटा प्राप्त करने में असमर्थ क्योंकि कैनवास क्रॉस-ओरिजिनल डेटा द्वारा दागदार हो गया है।

html2canvas: रेंडरर: कैनवास रेंडरर किया गया - कैनवास लौटा रहा है

जावास्क्रिप्ट फ़ाइल और छवि पिछली टिप्पणी के अलावा एक ही निर्देशिका में स्थित हैं।

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

Niklashvh मैं इसे एंड्रॉइड हाइब्रिड ऐप के लिए करने की कोशिश कर रहा हूं, जो फ़ाइल का उपयोग करके स्थानीय रूप से चलता है: // क्या आप मुझे इस क्रॉस डोमेन समस्या को हल करने के लिए मार्गदर्शन कर सकते हैं या किसी भी सुझाव की बहुत सराहना की जा सकती है।

यदि आपको कहीं भी छवि निर्यात करने की आवश्यकता नहीं है, तो आप हमेशा allowTaint: true सेट कर सकते हैं

हम छवि को स्मृति में निर्यात कर रहे हैं और इसे ईमेल में पीडीएफ के रूप में भेज रहे हैं

मुझे एक ही समस्या है, लॉग इस प्रकार है:

html2canvas: प्रीलोड शुरू होता है: html2canvas.js बैकग्राउंड-इमेज ढूंढना: 21
html2canvas: प्रीलोड: चित्र ढूँढना html2canvas.js: 21
html2canvas: प्रीलोड: हो गया। html2canvas.js 21
html2canvas: प्रारंभ: चित्र: 1/2 (विफल: 0) html2canvas.js: 21
html2canvas: प्रारंभ: चित्र: 2/2 (विफल: 0) html2canvas.js: 21
छवियों को लोड करना समाप्त: # 2 (विफल: 0) html2canvas.js: 21
html2canvas: रेंडरर: कैनवास रेंडरर किया गया - ओबीजे कैनवास लौटा रहा है

छवियां पृष्ठभूमि-छवि में स्थित हैं, बस मुख्य छवि div लोड करें, कैदियों को नहीं दिखाया जाता है।

कोई समस्या नहीं है क्योंकि छवियाँ क्रॉस एक ही डोमेन में हैं।

कोई विचार?

अगर मैं "पृष्ठभूमि-आकार: कवर;" जोड़ता हूं शैली के लिए, छवि प्रकट नहीं होती है ...

जाहिरा तौर पर यह समस्या है

और यह काम कर गया !!, केवल मुझे "पृष्ठभूमि-आकार: 100% 100%" रखना होगा; "पृष्ठभूमि-आकार: कवर;" के बजाय

आईएमजी के साथ ऑनलाइन यूआरएल का उपयोग करते समय एचटीएमएल @ कैनवास कैप्चर नहीं करता है, इस समस्या का समाधान क्या है?
धन्यवाद

@ Elgamal10 प्रॉक्सी का उपयोग करें

https://github.com/brcontainer/html2canvas-php-proxy (php के साथ html2canvas प्रॉक्सी)
https://github.com/brcontainer/html2canvas-asp-vbscript-proxy (एएसपी-क्लासिक के साथ html2canvas प्रॉक्सी - vb)
https://github.com/brcontainer/html2canvas-csharp-proxy (html2canvas प्रॉक्सी asp.net - csharp के साथ)

नोट: फ़ाइल पढ़ें README.md

आपके उत्तर के लिए धन्यवाद, यह स्क्रीन शूट अच्छा है लेकिन इसमें त्रुटियां हैं जैसे:

html2canvas_5 परिभाषित नहीं है
html2canvas_0 परिभाषित नहीं है
html2canvas_5 परिभाषित नहीं है
html2canvas_4 परिभाषित नहीं है
html2canvas_1 परिभाषित नहीं है
html2canvas_5 परिभाषित नहीं है

@ Elgamal10 प्रोजेक्ट में कोई समस्या पैदा करें
https://github.com/brcontainer/html2canvas-csharp-proxy/issues?state=open

मेरा मानना ​​​​है कि आप सी # (एएसपी.नेट) का उपयोग करते हैं, क्या मैं सही हूँ?

हाय निकलास,

मैंने आपके एपीआई का उपयोग करना शुरू कर दिया है और यह बहुत अच्छा है .. लेकिन मैं फंस गया हूँ क्या आप कृपया मदद कर सकते हैं ..

मैं कोड का उपयोग कर एक एचटीएमएल को कैनवास में बदलने की कोशिश कर रहा हूं:
jQuery('html').html2canvas({
प्रॉक्सी:" http://localhost/myproject/proxy.jsp ",
उपयोगकर्ता कॉर्स: सच ,
ऑनरेंडर: फ़ंक्शन (कैनवास) {
चेतावनी (कैनवास);
var url = कैनवास.toDataURL ("छवि/पीएनजी");
window.open(url, '_blank');
},
});

अब मेरे पास प्रॉक्सी.जेएसपी नामक एक फाइल है जो पथ में सभी क्रॉस मूल छवियों को सहेजती है ~/tomcat/myproject/images/"

उसके बाद मैं इसे कंसोल में देखता हूं
संसाधन को स्क्रिप्ट के रूप में व्याख्या किया गया लेकिन MIME प्रकार की छवि/jpeg के साथ स्थानांतरित किया गया: " http://localhost/myproject/proxy.jsp?url=http%3A%2F%2Fi.ebayi …QYEAAMXQVERSuVtL%2F%24_1.JPG%3Fset_id%3D8800004005&callback= html2canvas_64"। html2canvas.js:2264

इस सब के बाद, मेरा कॉलबैक फ़ंक्शन निष्पादित नहीं होता है और मैं कैनवास नहीं बना सकता ..

क्या किया जा सकता है? क्या आप कृपया मदद कर सकते हैं?

बहुत धन्यवाद

@ Himakshi89 आप एक ही समय में proxy: और userCORS: उपयोग नहीं कर सकते।

प्रॉक्सी का उपयोग करना पसंद करते हैं।
नोट: शरीर को पकड़ने का प्रयास करें।

आपके कोड में अल्पविराम शेष है:

},//this is wrong.

});

आपके html2canvas का कौन सा संस्करण?

ये कोशिश करें:

jQuery('body').html2canvas({
    "onrendered": function(canvas) {
    }
});

यदि काम नहीं करता है तो html2canvas को इस https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js पर डाउनलोड करने का प्रयास

html2canvas($("body").get(0), {
    "logging": true,
    "proxy": "http://localhost/myproject/proxy.jsp",
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

@brcontainer
नमस्ते

मैंने अपना कोड संशोधित कर लिया है और अब मैं प्रॉक्सी से प्रतिक्रिया भेज रहा हूं
({"html2canvas_67":http://localhost/myproject/0.1651487380333363.jpg"})

कंसोल में अब कोई त्रुटि नहीं दिखाई गई है।
लेकिन अब कुछ नहीं होता.. क्या होना चाहिए या कोई जगह है जिसे बदलने की जरूरत है?

कृपया सहायता कीजिए

लेकिन जैसा कि कंसोल कुछ भी नहीं दिखा सकता है
आपने मेरा दूसरा नमूना कोड इस्तेमाल किया? यह कंसोल को लॉग भेजता है।

परीक्षण के लिए अपना कोड ऑनलाइन तरीका प्रदान करने का प्रयास करें।

जैसा कि सुझाव दिया गया है कि मैंने useCORS को हटा दिया और html को बॉडी से बदल दिया

jQuery('body').html2canvas({
प्रॉक्सी:" http://nisquare.dyndns.org :8087/facebook/proxy.jsp",
लॉगिंग: सच ,
ऑनरेंडर: फ़ंक्शन (कैनवास) {
var url = कैनवास.toDataURL ("छवि/पीएनजी");
window.open(url, '_blank');
}
});

मुझे यह भी प्राप्त हो रहा है यह मेरा कंसोल है
html2canvas: लोड करने में त्रुटि : http://cmsip.tradus.ibcdn.com/MOBMKXE29ULYUMKH_4902586_320x360.jpg html2canvas.js:21

मुझे जो मिल रहा है उसका एक स्क्रीनशॉट मैंने संलग्न किया है

आपने https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js डाउनलोड करने का प्रयास किया

और यह कोड:

html2canvas($("body").get(0), {
    "logging": true,
    "proxy": "http://localhost/myproject/proxy.jsp",
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

या नहीं?

नोट: http://nisquare.dyndns.org:8087/facebook/proxy.jsp टूटा हुआ है!

मैंने नवीनतम संस्करण डाउनलोड किया था

मैं निम्नलिखित के साथ कोड को प्रतिस्थापित करता हूं

html2canvas($("body").get(0), {
प्रॉक्सी:" http://nisquare.dyndns.org :8087/facebook/proxy.jsp",
लॉगिंग: सच ,
ऑनरेंडर: फ़ंक्शन (कैनवास) {
var url = कैनवास.toDataURL ("छवि/पीएनजी");
window.open(url, '_blank');
}
});

मुझे लिंक परीक्षण भेजें

मैं इसका उपयोग कर रहा हूं यह क्रोम एक्सटेंशन है और एक्सटेंशन अभी भी विकास मोड में है

जेएसपी के साथ "क्रोम एक्सटेंशन"?

जेएसपी केवल प्रॉक्सी भाग के लिए उपयोग किया जा रहा है .. आपके अनुसार अधिक बेहतर क्या है?

क्रोम-एक्सटेंशन अन्य "प्रोटोकॉल" और "फ्रेम" में चलता है, प्रॉक्सी.जेएसपी HTTP प्रोटोकॉल का उपयोग करता है।

मेरा मानना ​​​​है कि क्रोम-एक्सटेंशन को प्रॉक्सी की आवश्यकता नहीं है। इस तरह प्रयोग करें:

html2canvas($("body").get(0), {
    "logging": true,
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

पढ़ें: http://developer.chrome.com/extensions/tut_debugging.html

@brcontainer
अरे इस विचार के लिए धन्यवाद .. अब हम क्रोम द्वारा प्रदान किए गए एपीआई का उपयोग कर रहे हैं। इसमें एक फ़ंक्शन क्रोम कैप्चरविज़िबलटैब है जो बहुत आसानी से हल करता है या समस्या करता है :)

@ jgab-net बहुत बहुत धन्यवाद। त्रुटि के लिए बहुत लंबा खोजा गया

@ सुमित8 (वाई) आपका स्वागत है

@gitbala क्या आपकी समस्या का समाधान हो गया है? @niklasvh क्या इस मुद्दे को बंद किया जा सकता है? (यदि यह कष्टप्रद है तो मैं बग ट्राइएज के साथ रुक जाऊंगा .. :)

@usmonster हर तरह से जारी है, मुझे प्रत्येक खुले मुद्दे को देखने के लिए कुछ समय बचाता है :)

हाँ इसका समाधान :)

सोम, पर 4:11 AM 1 सितं, 2014 पर usmonster [email protected] लिखा है:

@gitbala https://github.com/gitbala क्या आपकी समस्या का समाधान हो गया है? @niklasvh
https://github.com/niklasvh क्या इस मुद्दे को बंद किया जा सकता है? (मैं इसके साथ रुकूंगा
बग ट्राइएज यह कष्टप्रद है .. :)

-
इस ईमेल का सीधे उत्तर दें या इसे GitHub पर देखें
https://github.com/niklasvh/html2canvas/issues/145#issuecomment -54047596
.

मैं html2canvas का उपयोग कर रहा हूं - स्थानीय छवि पीडीएफ में प्रस्तुत नहीं हो रही है। इसका समाधान क्या है?

@niklasvh कृपया मदद करें - एचटीएमएल में लोगो छवि पीडीएफ में प्रस्तुत नहीं हो रही है

": मैं जब परिवर्तित इनलाइन image.how" प्रॉक्सी "का उपयोग करने में विफल रहा http: //localhost/myproject/proxy.jsp ", मैं Vue उपयोग करते हैं, जहां इस jsp डाल करने के लिए और मैं कैसे @niklasvh उपयोग करने के लिए पता नहीं है यह कर सकते हैं आप मदद?

@qiuyaofan एक ही समस्या होने पर क्या आपको समाधान मिला? मैं इसे कोणीय 2 के साथ उपयोग कर रहा हूं और अन्य सर्वर से छवियां प्राप्त कर रहा हूं। @gitbala क्या आपको समाधान मिला?

+1 बीटीडब्ल्यू लॉग अच्छे लगते हैं ( html2canvas: Images loaded, starting parsing ) लेकिन मुझे अभी भी पीडीएफ पर छवियां नहीं दिख रही हैं।

मैं उपयोग कर रहा हूँ

अनुमति दें: सच है,
कॉर्स का उपयोग करें: सच,
टेंटटेस्ट: झूठा,

@NikhilRadadiya @qiuyaofan दोस्तों, एक

html2canvas(element, {
        "logging": true, //Enable log (use Web Console for get Errors and Warings)
        useCORS: true,
        taintTest: false,
        onrendered: function(canvas) {
          var img = new Image();
          img.onload = function() {
            document.body.appendChild(img);
          };
          img.error = function() {
            if(window.console.log) {
              window.console.log("Not loaded image from canvas.toDataURL");
            } else {
              alert("Not loaded image from canvas.toDataURL");
            }
          };
          img.src = canvas.toDataURL("image/png");
        }
      });

इसलिए किसी प्रॉक्सी का इस्तेमाल नहीं किया गया।

@creepteed मेरे पास अन्य तत्व हैं जिन्हें मुझे कैनवास में बदलने और फिर पीडीएफ में सहेजने की आवश्यकता है, मेरे एचटीएमएल में केवल छवियां नहीं हैं, अगर ऐसा है तो मैं आपके द्वारा पोस्ट किए गए उपरोक्त फ़ंक्शन का उपयोग कैसे कर सकता हूं?

हाय @niklasvh ,
मैं htmltocanvas का उपयोग करके वेबपेज पर कब्जा करना चाहता हूं, सब ठीक काम कर रहा है, लेकिन जब मैं वेबपेज पर कब्जा करने की कोशिश कर रहा हूं तो मुझे चित्र नहीं मिल रहे हैं।
क्या आप मेरी मदद कर सकते हैं?
यहाँ मेरा कोड है:
function capture(div_id=null) { jQuery(".screenshot_row_target").html2canvas({ logging: true, //taintTest : true, //proxy: "https://skeleton-21.myshopify.com", onrendered: function (canvas) { jQuery('#screenshot_img_val').val(canvas.toDataURL("image/png")); //document.getElementById("screenshot_html_form").submit(); } }); }

कंसोल में, मुझे यह मिल रहा है
html2canvas: Preload starts: finding background-images html2canvas.js:19 html2canvas: Preload: Finding images html2canvas.js:19 html2canvas: Preload: Done. html2canvas.js:19 html2canvas: start: images: 0 / 0 (failed: 0) html2canvas.js:19 Finished loading images: # 0 (failed: 0) html2canvas.js:19 html2canvas: Error loading <img>://cdn.shopify.com/s/files/1/2186/4293/files/user2_300x300.png?v=1503661428 html2canvas.js:19 html2canvas: Error loading background: html2canvas.js:19 html2canvas: Error loading <img>://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_300x300.gif html2canvas.js:19 html2canvas: Renderer: Canvas renderer done - returning canvas obj
धन्यवाद।