Html2canvas: एसवीजी पर कब्जा

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

यदि हालाँकि, आपको परवाह नहीं है कि एसवीजी छवियां कैनवस को छेड़ती हैं, तो आप विकल्प allowTaint से true सेट कर सकते हैं और SVG को उन ब्राउज़र के लिए सही तरीके से प्रस्तुत करना चाहिए जो इनवॉइस SVG की अनुमति देते हैं।

मैं यह भी बताना चाहूंगा कि यदि SVG रेंडर सही ढंग से ब्राउज़र को पार करेगा, तो यह लाइब्रेरी लगभग अप्रचलित हो जाएगी, क्योंकि SVG का उपयोग HTML रेंडर करने के लिए किया जा सकता है। मैंने पहले से ही कुछ कोड के लिए प्रतिबद्ध किया है जो उन ब्राउज़रों पर कैनवास रेंडरिंग को तेज करता है जहां एसवीजी प्रतिपादन काम करता है (यानी एफएफ 12), साथ ही सभी सीएसएस संपत्तियों के लिए समर्थन की अनुमति देता है जो ब्राउज़र समर्थन करता है। जानकारी के लिए https://github.com/niklasvh/html2canvas/blob/master/src/Parse.js#L1227 पर एक नज़र डालें

नमस्कार,
आपकी शीघ्र प्रतिक्रिया के लिए बहुत बहुत धन्यवाद।
मैंने आपके सुझावों के रूप में कोशिश की: नीचे के रूप में सच की अनुमति दें (test.js संशोधित करें):

setTimeout (फ़ंक्शन () {

        $(h2cSelector).html2canvas($.extend({
            flashcanvas: "../external/flashcanvas.min.js",
            logging: true,
            profile: true,
            useCORS: true,
            allowTaint: true
        }, h2cOptions));
    }, 100);

यह SVG को सफलतापूर्वक उदाहरण images.html में रेंडर करता है।

लेकिन अगर एसवीजी अधिक जटिल है तो यह क्रॉस ब्राउज़र में सही तरीके से प्रस्तुत नहीं करता है। उदाहरण के लिए: मैं क्रोम में चार्ट (http://www.highcharts.com/demo/) पर कब्जा करना चाहता हूं: यह चार्ट के x अक्ष और y अक्ष को तब पकड़ता है जब चार्ट चार्ट में इनलाइन SVG के रूप में प्रस्तुत किया जाता है। एक्सेंगल svg फ़ाइल से स्रोत के साथ img के रूप में प्रस्तुत करना, यह कुछ भी कब्जा नहीं करता है।
क्रोम के विपरीत, फ़ायरफ़ॉक्स में, यह कुछ भी कैप्चर नहीं करता है जब चार्ट इनलाइन एसवीजी के रूप में प्रस्तुत करता है, लेकिन जब चार्ट बाहरी svg फ़ाइल से एक छवि है, तो चार्ट को सफलतापूर्वक पकड़ सकता है। सबसे खराब IE9 में है, कुछ भी कब्जा नहीं है।

क्या आपके पास इस मुद्दे को हल करने का कोई विचार है?

छवि के रूप में उपयोग करके एफएफ / क्रोम के लिए काम करना चाहिए। क्या आप कोशिश कर सकते हैं कि क्या ड्रॉ का उपयोग करके एक साधारण कैनवास प्रस्तुत किया गया है जो एसवीजी के साथ काम करता है।

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

@ babyhero184 मैंने

@joeyrobert मैं भी इसी मुद्दे का सामना कर रहा हूँ highcharts और html2canvas के साथ। यदि आप अपने कोड को साझा कर सकते हैं तो यह एक बड़ी मदद होगी।
अग्रिम में धन्यवाद।

@joeyrobert @ Jagdeep1 कैनवास पर SVG को रेंडर करने के लिए Fabric.js का उपयोग कर

+1

+1

+1

इस मुद्दे के लिए कोई समाधान?

@majuansari _SVG_ से _Canvas_ और _Canvas_ से _image_ फ़ायरफ़ॉक्स में काम करता है, लेकिन क्रोम में सुरक्षा लॉक है।

मैं चार्ट तत्वों को पकड़ने के लिए jQuery का उपयोग कर रहा था, और यह पता चला कि हाईचर्ट्स SVG को ठीक से पार्स नहीं किया गया था जब उसने ऐसा किया था। यदि कोई किसी चार्ट का jQuery चयनकर्ता है, तो उसमें SVG नहीं हो सकता है।

@mbritton कोशिश करें http://code.google.com/p/canvg/ (विदेशी काम नहीं)

हां, यही मेरा समाधान था।

मैंने कैप्चर करते समय कैनवस-जनरेट किए गए कैनवास तत्वों के साथ svg तत्वों को प्रतिस्थापित करके इस समस्या को हल किया।
यहाँ मेरा कोड है।

// targetElem is a jquery obj
function take (targetElem) {
    var nodesToRecover = [];
    var nodesToRemove = [];

    var svgElem = targetElem.find('svg');

    svgElem.each(function(index, node) {
        var parentNode = node.parentNode;
        var svg = parentNode.innerHTML;

        var canvas = document.createElement('canvas');

        canvg(canvas, svg);

        nodesToRecover.push({
            parent: parentNode,
            child: node
        });
        parentNode.removeChild(node);

        nodesToRemove.push({
            parent: parentNode,
            child: canvas
        });

        parentNode.appendChild(canvas);
    });

    html2canvas(targetElem, {
        onrendered: function(canvas) {
            var ctx = canvas.getContext('2d');
            ctx.webkitImageSmoothingEnabled = false;
            ctx.mozImageSmoothingEnabled = false;
            ctx.imageSmoothingEnabled = false;

            canvas.toBlob(function(blob) {
                nodesToRemove.forEach(function(pair) {
                    pair.parent.removeChild(pair.child);
                });

                nodesToRecover.forEach(function(pair) {
                    pair.parent.appendChild(pair.child);
                });
                saveAs(blob, 'screenshot_'+ moment().format('YYYYMMDD_HHmmss')+'.png');
            });
        }
    });
}

बस एक त्वरित नोट:
मुझे यकीन है कि canvg ठीक काम कर रहा है, लेकिन अगर आप बस SVG को कैनवस में बदलना चाहते हैं, तो आप यहाँ वर्णित सरल तकनीक का उपयोग कर सकते हैं जो एक छवि में svg को लोड करती है और फिर dataURL के रूप में छवि सामग्री प्राप्त करती है।

var image = new Image();
var xml = '<svg xmlns=....></svg>';
image.src = 'data:image/svg+xml,' + escape(xml); 
document.getElementById('container').appendChild(image);
image.onload = function() {
    image.onload = function() {};
    var canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    var context = canvas.getContext('2d');
    context.drawImage(image, 0, 0);
    image.src = canvas.toDataURL();
}

@steren : जबकि यह क्रोम में बहुत अच्छा काम करता है, क्या फ़ायरफ़ॉक्स के लिए एक वर्कअराउंड है, जो लाइन के संदर्भ में एक NS_ERROR_NOT_AVAILABLE का उत्पादन करता है। छवि (0, 0, 0) - जाहिरा तौर पर एक बग पता है - [11] जहां कैनवास पर एक SecurityError दिखाई देता है। .DataURL () छवि एक ही डोमेन पर होने के बावजूद? Chrome के अलावा अन्य ब्राउज़रों में इसे चलाने में सक्षम नहीं ...

@gifarangw आपका कोड हाईचर्ट के साथ ठीक काम करता है। अपने अद्भुत कोड के लिए धन्यवाद। : +1: केवल एक चीज जो मैंने निकाली थी वह थी कैनवास। एलटीएलओबी भाग।

@ अपने समाधान के लिए धन्यवाद, यह अच्छी तरह से काम करता है (नवीनतम क्रोम और फ़ायरफ़ॉक्स पर परीक्षण किया गया), और इसे एक अतिरिक्त पुस्तकालय की आवश्यकता नहीं है जो अच्छा है। मैंने कुछ बदलाव किए और @gifarangw के कोड के साथ

    function take(targetElem) {
        // First render all SVGs to canvases
        var elements = targetElem.find('svg').map(function() {
            var svg = $(this);
            var canvas = $('<canvas></canvas>');
            svg.replaceWith(canvas);

            // Get the raw SVG string and curate it
            var content = svg.wrap('<p></p>').parent().html();
            content = content.replace(/xlink:title="hide\/show"/g, "");
            content = encodeURIComponent(content);
            svg.unwrap();

            // Create an image from the svg
            var image = new Image();
            image.src = 'data:image/svg+xml,' + content;
            image.onload = function() {
                canvas[0].width = image.width;
                canvas[0].height = image.height;

                // Render the image to the canvas
                var context = canvas[0].getContext('2d');
                context.drawImage(image, 0, 0);
            };
            return {
                svg: svg,
                canvas: canvas
            };
        });
        targetElem.imagesLoaded(function() {
            // At this point the container has no SVG, it only has HTML and Canvases.
            html2canvas(targetElem[0], {
                onrendered: function(canvas) {
                    // Put the SVGs back in place
                    elements.each(function() {
                        this.canvas.replaceWith(this.svg);
                    });

                    // Do something with the canvas, for example put it at the bottom
                 $(canvas).appendTo('body');
                }
            })
        })
    }

(https://github.com/desandro/imagesloaded का उपयोग करता है)

हाय सब बस कहने के लिए कि @Remiremi समाधान मेरे लिए बहुत अच्छा काम किया! मेरे पास एक पेज है जिसमें svg में HighStocks के साथ बहुत सारे ग्राफ बनाए गए हैं और इस समाधान ने बहुत अच्छा काम किया है! अच्छी तरह से किया दोस्तों!

@Remiremi @fbotti , किसी कारण से मैं img.onLoad में नहीं पहुंचता हूं, इसलिए ग्राफ़ गायब हो जाते हैं (कैनवास से प्रतिस्थापित नहीं किया जा रहा)

मैं amcharts के साथ काम कर रहा हूँ। कोई विचार?

@guypaskar आपके svg को आगे क्यूरेट करने की आवश्यकता हो सकती है। आप जोड़ सकते हैं $(image).appendTo('body'); seting से पहले कोड के लिए image.onload , तो फ़ायरफ़ॉक्स में आप अमान्य छवि के लिए एक आइकन दिखाई देगा, तो आप सही क्लिक कर सकते हैं> दृश्य छवि और त्रुटि देखते हैं।

मैंने एक amcharts svg को एक त्वरित प्रयास दिया और मुझे इसे बनाने के लिए svg टैग में xmlns="http://www.w3.org/2000/svg" width="1400" height="500" का गुण जोड़ना पड़ा। (ऊंचाई और चौड़ाई सीएसएस गुणों के रूप में निर्दिष्ट की गई थी, लेकिन किसी कारण से इसे उठाया नहीं गया।)

मैंने एक साधारण फिक्स पाया है।

सुनिश्चित करें कि आपकी svg छवि की चौड़ाई और ऊंचाई है।

पर्याप्त तर्क नहीं हैं क्योंकि एक svg कठबोली को एक छवि की तरह मापा जा सकता है।

क्या इस मुद्दे पर कोई पुनरावृत्ति कर सकता है? क्या मूल मसला हल हो गया है? ऐसा लगता है कि कुछ ब्राउज़र मुद्दों ने 2012 के बाद से यहां बताई गई अधिकांश समस्याओं को ठीक कर दिया है। कुछ टिप्पणियों के अनुसार, अन्य पुस्तकालयों जैसे कि कैनवग के उपयोग की भी अब आवश्यकता नहीं है?

शेष मुद्दों के लिए, उन्हें # 197 और / या # 267 द्वारा कवर किया जाएगा? क्या यह बंद हो सकता है?

यह अभी भी कम से कम कुछ ब्राउज़रों के साथ एक समस्या है

0.5 एसवीजी के लिए समर्थन जोड़ता है

किसी भी पूर्वावलोकन जब 0.5 @niklasvh बाहर आ जाएगा?

@IvoPereira आप # 421 में 0.5 की स्थिति का पालन कर सकते हैं

@niklasvh मेरे पास 0.5 संस्करण है और एसवीजी अभी भी प्रस्तुत नहीं करता है। वहाँ एक उदाहरण है कि यह कैसे करना है? (इसकी इनलाइन एसवीजी)

@ यानिकोलंग में आपने html2canvas.js और html2canvas.svg.js ? यदि हां, तो क्या आप अपनी विशिष्ट समस्या को प्रदर्शित करने के लिए jsFiddle या jsbin प्रदान कर सकते हैं?

मुझे यह काम मिला। समस्या यह थी कि जब मैंने html2canvas किया था तो SVG पूरी तरह से प्रदान नहीं किया गया था।

लेकिन ऐसा लगता है कि प्रतिपादन के साथ अभी भी कुछ मुद्दे हैं। उदाहरण के लिए http://d3pie.org

यह इसकी तरह लग रहा है:

यह html2canvas के बाद कैसा दिखता है:

वाह, यह बहुत डरावना है। बस इतना आसान ट्रैक करने के लिए, क्या आप एक ही स्क्रीनशॉट के साथ एक अलग मुद्दा खोल सकते हैं और डेमो के साथ सिर्फ jsFiddle के लिए एक लिंक? यह मूल मुद्दे से बहुत दूर हो रहा है, जो बहुत पहले बंद हो गया था। इसे रिपोर्ट करने के लिए धन्यवाद!

मैं ऐसा करना पसंद करूंगा लेकिन मुझे नहीं पता कि नए html2canvas को jsfiddle में कैसे शामिल किया जाए। क्या कोई बाहरी लिंक है जिसका मैं उपयोग कर सकता हूं?

@nikolang आप http://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.js का उपयोग कर सकते हैं।

धन्यवाद। और एसवीजी-संस्करण?

इसी प्रकार: http://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.svg.js

नमस्ते,

एसवीजी मेरी तरफ से प्रस्तुत किए जाते हैं, लेकिन काले दिखाई देते हैं, जैसा कि नीचे किसी ने रिपोर्ट किया है। क्या svg तत्वों की "भरण" संपत्ति को गिनने का कोई तरीका है?

@ ब्रेन्रा , मैं कुछ इस तरह का उपयोग कर रहा हूं ताकि वह सफेद हो जाए।

// Create dummy canvas to get a white background
var destinationCanvas = document.createElement("canvas");
destinationCanvas.width = canvas.width;
destinationCanvas.height = canvas.height;

var destCtx = destinationCanvas.getContext('2d');

//create a rectangle with the desired color
destCtx.fillStyle = "#FFFFFF";
destCtx.fillRect(0,0,canvas.width,canvas.height);

//draw the original canvas onto the destination canvas
destCtx.drawImage(canvas, 0, 0);

var img = destinationCanvas.toDataURL("image/png");

'CanvasRenderingContext2D' पर 'drawImage' को निष्पादित करने में विफल: प्रदान किया गया HTMLImageElement 'टूटी हुई स्थिति' में है। "

HTML में svg एलिमेंट होने पर मुझे यह त्रुटि हो रही है।
इसके अलावा मैंने allowTaint को सच करने के लिए सेट किया है। क्या कोई मेरी सहायता कर सकता है?

मुझे लगता है कि इसे फिर से खोल दिया जाना चाहिए - svg तत्व हर ब्राउज़र में ठीक से प्रस्तुत कर रहे हैं, लेकिन फ़ायरफ़ॉक्स।

NS_ERROR_NOT_AVAILABLE: यह एक फ़ायरफ़ॉक्स बग है: https://bugzilla.mozilla.org/show_bug.cgi?id=700533 (AFAICT) एक परीक्षण पृष्ठ है जो इस मुद्दे को उजागर करता है (बग से जुड़ा) http://phrogz.net/ SVG / svg_to_png.xhtml

एक वर्कअराउंड / फिक्स की बहुत सराहना की जाएगी। या हो सकता है कि कोई इस तय को पाने के लिए किसी को @mozilla को पोक कर सके :)

यहाँ आपका समाधान है:
http://stackoverflow.com/questions/18271898/html-and-svg-to-canvas-javascript/32457864#32457864

मैंने इसे कोणीय का उपयोग करने की कोशिश की, लेकिन एक दागी कैनवास के साथ समाप्त हुआ। मुझे लगता है कि मुझे कच्चे एसवीजी की आवश्यकता है?

<img svg-2-canvas-src="/assets/your.svg"/>

angular.module('APP')
    .directive('svg2CanvasSrc', function() {
        return {
            restrict: 'A',
            scope: false,
            link: function($scope, $element, $attrs) {

                var svgSrc = $attrs['svg2CanvasSrc'];

                var image = new Image();

                image.onload = function() {
                    image.onload = function() {};
                    var canvas = document.createElement('canvas');
                    canvas.width = image.width;
                    canvas.height = image.height;
                    var context = canvas.getContext('2d');
                    context.drawImage(image, 0, 0);
                    $element[0].src = canvas.toDataURL();
                };

                image.src = svgSrc;
            }
        };
    });

@remiremi मैंने आपके कोड का उपयोग किया लेकिन परिणाम समान है, svg गायब है ..
मूल - https://s29.postimg.org/5lkprhx93/with_SVG.png
परिणाम - https://s23.postimg.org/j1otj2por/without_SVG.png

@remiremi ... प्लगइन का नाम क्या है जो मुझे इस स्क्रिप्ट का उपयोग करते समय

मूल रूप से, html2canvas को कॉल करने से पहले एसवीजी पर एक स्पष्ट चौड़ाई / ऊंचाई सेट करना मेरे लिए अधिकांश मामलों को ठीक करता है।
मैं हितों के विभिन्न एसवीजी तत्वों के माध्यम से लूप क्या कर रहा हूं, अपने ब्राउज़र की गणना चौड़ाई / ऊंचाई का उपयोग करके प्राप्त करें।। 'प्रस्तुत करना नहीं है, लेकिन पिक्सल के साथ, Booyah

अभी भी बहु-लाइन स्पैन और डिव के हालांकि प्रतिपादन के मुद्दे हैं

हाय दोस्तों,
मैं स्रोत कोड को थोड़ा बदलकर इस समस्या को (फ़ायरफ़ॉक्स के साथ खोए हुए svg) को हल करता हूं।
सबसे पहले, एसवीजी तत्व में ऊँचाई और चौड़ाई की विशेषता होनी चाहिए, पिक्सल के साथ कोई फर्क नहीं पड़ता या नहीं।
तब आपको स्रोत कोड से बदलना चाहिए:
self.image.src = " डेटा: छवि / svg + xml ," + (नया XMLSerialial ()))। serializeToString (नोड);
सेवा मेरे:
self.image.src = " डेटा: छवि / svg + xml ," + encodeURIComponent ((नया XMLSerializer ())। serializeToString (नोड));

फिर इसका आनंद लें।

क्या किसी को इस बात का अंदाजा है कि मैं DOM में SVG एलिमेंट पर html2canvas कैसे कॉल करूंगा?

एक उदाहरण बहुत अच्छा होगा!

+1 अभी भी फ़ायरफ़ॉक्स में एसवीजी तत्व स्क्रीनशॉट को कैप्चर करने के लिए एक समस्या है।

{
  profile: true,
  allowTaint: false,
  onrendered: function() {
    //...done()
  }
}

अरे, मैं इस समाधान (jQuery के बिना) का उपयोग करके इस समस्या को हल करने में सक्षम था:
उपाय

let targetElem =document.getElementById ('बॉडी');
nodesToRecover = [];
let nodesToRemove = [];

    let svgElem = targetElem.querySelector('svg')

    let parentNode = svgElem.parentNode;
        // let svg = parentNode.innerHTML;
        let svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" id=\"svg-annotations\" style=\"opacity: 1;\" _ngcontent-c7=\"\">\n\t\t\t<defs><marker id=\"arrow-start\" refY=\"4.5\" markerWidth=\"9.9\" markerHeight=\"9\" orient=\"auto\"><path fill=\"black\" d=\"M 9.9 0 L 9.9 9 L 0 4.5 Z\" /></marker><marker id=\"arrow-end\" refX=\"9.9\" refY=\"4.5\" markerWidth=\"9.9\" markerHeight=\"9\" orient=\"auto\"><path fill=\"black\" d=\"M 0 0 L 0 9 L 9.9 4.5 Z\" /></marker></defs><g class=\"annotation-group\" id=\"measurement-36122\" style=\"opacity: 1;\"><g class=\"annotations\"><g class=\"annotation callout elbow editable \" transform=\"translate(758.541 408.978)\"><g class=\"annotation-connector\"><path class=\"connector\" fill=\"none\" stroke=\"black\" d=\"M 0 0 L 137 137 L 162 137\" /></g><g class=\"annotation-note\" transform=\"translate(162 137)\"><g class=\"annotation-note-content\" transform=\"translate(0 3)\"><rect class=\"annotation-note-bg\" fill=\"white\" fill-opacity=\"0\" x=\"0\" width=\"104.79\" height=\"41.36\" /><text class=\"annotation-note-label\" fill=\"black\" y=\"41.36\" dx=\"0\"><tspan x=\"0\" dy=\"0.8em\" /></text><text class=\"annotation-note-title\" font-weight=\"bold\" fill=\"black\"><tspan x=\"0\" dy=\"0.8em\">Face</tspan><tspan x=\"0\" dy=\"1.2em\">:5453831.5mm²</tspan></text></g><path class=\"note-line\" stroke=\"black\" d=\"M 0 0 L 104.79 0\" /><circle class=\"handle \" cursor=\"move\" fill=\"grey\" fill-opacity=\"0.1\" stroke=\"grey\" stroke-dasharray=\"5\" cx=\"0\" cy=\"0\" r=\"10\" /></g></g></g></g><g class=\"annotation-group\" id=\"measurement-59622\" style=\"opacity: 1;\"><g class=\"annotations\"><g class=\"annotation callout elbow editable \" transform=\"translate(889.656 387.507)\"><g class=\"annotation-connector\"><path class=\"connector\" fill=\"none\" stroke=\"black\" d=\"M 0 0 L 137 137 L 162 137\" /></g><g class=\"annotation-note\" transform=\"translate(162 137)\"><g class=\"annotation-note-content\" transform=\"translate(0 3)\"><rect class=\"annotation-note-bg\" fill=\"white\" fill-opacity=\"0\" x=\"0\" width=\"104.79\" height=\"41.36\" /><text class=\"annotation-note-label\" fill=\"black\" y=\"41.36\" dx=\"0\"><tspan x=\"0\" dy=\"0.8em\" /></text><text class=\"annotation-note-title\" font-weight=\"bold\" fill=\"black\"><tspan x=\"0\" dy=\"0.8em\">Face</tspan><tspan x=\"0\" dy=\"1.2em\">:5453831.5mm²</tspan></text></g><path class=\"note-line\" stroke=\"black\" d=\"M 0 0 L 104.79 0\" /><circle class=\"handle \" cursor=\"move\" fill=\"grey\" fill-opacity=\"0.1\" stroke=\"grey\" stroke-dasharray=\"5\" cx=\"0\" cy=\"0\" r=\"10\" /></g></g></g></g></svg>";

        this.canvas = document.createElement('canvas');
        this.canvas.setAttribute('id', '_canvas');

        canvg(this.canvas, svg, {renderCallback: function(){
            console.log(this);
        }});

        nodesToRecover.push({
            parent: parentNode,
            child: svgElem
        });
        parentNode.removeChild(svgElem);

        nodesToRemove.push({
            parent: parentNode,
            child: this.canvas
        });

        parentNode.appendChild(this.canvas);
        let data = this.canvas.toDataURL('image/png', 0.5);
        console.log(data);

मैं यह कर रहा हूं, लेकिन मैं एक, IE11 में केवल खाली छवि प्राप्त कर रहा हूं। लेकिन, मैं कैनवास को वेबपेज पर देख सकता हूं। क्या कोई मेरी मदद कर सकता है कि मैं यहां क्या गलत कर रहा हूं?

नमस्कार। मुझे एक समस्या प्रस्तुत करना है svg जब यह <image> टैग होता है।

नमूना svg

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/>
</svg>

Jsfiddle http://jsfiddle.net/maestro888/fmjywksq/ में नमूना

मैंने एक साधारण फिक्स पाया है।

सुनिश्चित करें कि आपकी svg छवि की चौड़ाई और ऊंचाई है।

पर्याप्त तर्क नहीं हैं क्योंकि एक svg कठबोली को एक छवि की तरह मापा जा सकता है।

यह सच है, लेकिन IE11 के लिए नहीं, दुर्भाग्य से ...

मुझे खुशी है कि आपको इसका हल मिल गया।
बस अपने जेएस फिडेल की जाँच की और यह छवि प्रदर्शित कर रहा है।

सादर,

बर्नार्ड टीए बेकर

बुध पर, 27 मार्च 2019 को शाम 4:34 बजे एलेसेंड्रो कैंडिनी नोटिफिकेशन @github.com
लिखा था:

मैंने एक साधारण फिक्स पाया है।

सुनिश्चित करें कि आपकी svg छवि की चौड़ाई और ऊंचाई है।

पर्याप्त तर्क नहीं हैं क्योंकि एक svg कठबोली को मापा जा सकता है
एक छवि की तरह कर सकते हैं।

यह सच है, लेकिन IE11 के लिए नहीं, दुर्भाग्य से ...

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपने टिप्पणी की है।
इस ईमेल का उत्तर सीधे दें, इसे GitHub पर देखें
https://github.com/niklasvh/html2canvas/issues/95#issuecomment-477242196 ,
या धागा म्यूट करें
https://github.com/notifications/unsubscribe-auth/AM7ZzLPsl0WJS7gGI9npSsRxR33FCnN9ks5va52bgaJpZM4AD-Sb
।

मुझे कैनवग के साथ एक समाधान मिला है, यहां स्टैक ओवरफ्लो पर रिपोर्ट किया गया है: यह IE11 पर पूरी तरह से काम करता है!

JQuery की निर्भरता को हटाते हुए मेरा पुनः विस्तृत स्निपेट:

let svgIcons = document.querySelectorAll('.svg-icon');

for (let i = 0; i < svgIcons.length; ++i) {
  let curSvg = svgIcons[i];
  let canvas;
  let xml;

  // Size and color needed for every browser
  curSvg.setAttribute('width', curSvg.parentNode.offsetWidth);
  curSvg.setAttribute('height', curSvg.parentNode.offsetHeight);
  curSvg.setAttribute('style', 'fill: blue');

  canvas = document.createElement('canvas');
  canvas.className = 'screenShotTempCanvas';
  xml = new XMLSerializer().serializeToString(curSvg);
  canvg(canvas, xml);
  curSvg.parentNode.insertBefore(canvas, curSvg.nextSibling);
  curSvg.style.display = 'none';
 }

वाह् भई वाह

थू पर, 28 मार्च 2019, 08:49 एलेसेंड्रो कैंडिनी, सूचनाएं @github.com
लिखा था:

मुझे canvg के साथ एक समाधान मिला है https://github.com/canvg/canvg ,
स्टैक ओवरफ्लो पर यहां रिपोर्ट की गई
https://stackoverflow.com/questions/34042440/using-html2canvas-to-render-a-highcharts-chart-to-pdf-doesnt-work-on-ie-and-fir :
यह IE11 पर पूरी तरह से काम करता है!

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपने टिप्पणी की है।
इस ईमेल का उत्तर सीधे दें, इसे GitHub पर देखें
https://github.com/niklasvh/html2canvas/issues/95#issuecomment-47750s21
या धागा म्यूट करें
https://github.com/notifications/unsubscribe-auth/AM7ZzKNy1GOgQU9TVv7PGCi4fJvYSxDVks5vbIIOgaJpZM4AD-bb
।

हाय @niklasvh अपने html2canvas जावास्क्रिप्ट पुस्तकालय को देखकर अच्छा लगा, यह एक भयानक पुस्तकालय है, लेकिन फिर भी npm संस्करण का उपयोग करके कैनवास निर्माण में svg प्रदान करने के लिए उसी मुद्दे का सामना कर रहा हूँ "1.0.0-Alpha.12
"के रूप में अच्छी तरह से" 1.0.0-rc.1 "संस्करण भी हमारे anguar6 आवेदन में, इस मुद्दे की सूची से आपकी प्रतिक्रिया के अनुसार, समस्या आ जाएगी svg ऊंचाई और चौड़ाई शामिल नहीं है, लेकिन मेरे मामले में मेरे Svg है 100% ऊंचाई और चौड़ाई और नेस्टेड डिव में svg टैग भी मौजूद है और मौजूदा कैनवास को भी नेस्टेड किया है, मैं अपने पेज को png इमेज के रूप में निर्यात कर सकता हूं, लेकिन छवि में केवल दुर्घटनाग्रस्त svg आइकन शामिल हैं और मौजूदा कैनवस भी रेंडर नहीं कर रहे हैं। और एक और चीज एक बार निर्यात किया गया मेरे दूसरे पेज svg सभी दुर्घटनाग्रस्त चित्रों के रूप में दिखाई दे रहे हैं। आपके संदर्भ के लिए मैंने अपनी स्क्रीन शॉट संलग्न किया है कृपया एक बार देखें और मुझे धन्यवाद दें।
html2canvas (this.screen.nativeElement, {useCORS: true})। फिर (कैनवास => {
this.canvas.nativeElement.src = कैनवास.toDataURL ('छवि / पीएनजी');
this.downloadLink.nativeElement.href = कैनवास.toDataURL ('छवि / पीएनजी');
this.downloadLink.nativeElement.download = 'स्क्रीनशॉट.png';
this.downloadLink.nativeElement.click ();
};

testpdf (1) .pdf
नमस्ते,
मुझे अक्ष मिल रहा है लेकिन चार्ट का बाकी क्षेत्र काला है। कोई भी सुझाव है

हाय @niklasvh अपने html2canvas जावास्क्रिप्ट पुस्तकालय को देखकर अच्छा लगा, यह एक भयानक पुस्तकालय है, लेकिन फिर भी npm संस्करण का उपयोग करके कैनवास निर्माण में svg प्रदान करने के लिए उसी मुद्दे का सामना कर रहा हूँ "1.0.0-Alpha.12
"के रूप में अच्छी तरह से" 1.0.0-rc.1 "संस्करण भी हमारे anguar6 आवेदन में, इस मुद्दे की सूची से आपकी प्रतिक्रिया के अनुसार, समस्या आ जाएगी svg ऊंचाई और चौड़ाई शामिल नहीं है, लेकिन मेरे मामले में मेरे Svg है 100% ऊंचाई और चौड़ाई और नेस्टेड डिव में svg टैग भी मौजूद है और मौजूदा कैनवास को भी नेस्टेड किया है, मैं अपने पेज को png इमेज के रूप में निर्यात कर सकता हूं, लेकिन छवि में केवल दुर्घटनाग्रस्त svg आइकन शामिल हैं और मौजूदा कैनवस भी रेंडर नहीं कर रहे हैं। और एक और चीज एक बार निर्यात किया गया मेरे दूसरे पेज svg सभी दुर्घटनाग्रस्त चित्रों के रूप में दिखाई दे रहे हैं। आपके संदर्भ के लिए मैंने अपनी स्क्रीन शॉट संलग्न किया है कृपया एक बार देखें और मुझे धन्यवाद दें।
html2canvas (this.screen.nativeElement, {useCORS: true})। फिर (कैनवास => {
this.canvas.nativeElement.src = कैनवास.toDataURL ('छवि / पीएनजी');
this.downloadLink.nativeElement.href = कैनवास.toDataURL ('छवि / पीएनजी');
this.downloadLink.nativeElement.download = 'स्क्रीनशॉट.png';
this.downloadLink.nativeElement.click ();
};

एक ही समस्या, क्लोन दस्तावेज़ में svg खोजने में त्रुटि

HTML2canvas का उपयोग करने से पहले मैं अस्थायी रूप से SVG के लिए ऊँचाई और चौड़ाई निर्धारित कर रहा हूँ। इस तरह मैं svg को पकड़ने में सक्षम हूं।

var selectItem = document.querySelector ("। ChartWrapper");
var svgElements = selectItem.querySelectorAll ('svg');
के लिए (आइए = 0; मैं <svgElements.length; मैं ++) {
selectItem.getElementsByTagName ("svg") [i] .style.height = document.getElementsByTagName ("svg") [i] .getBoundingClientClure () ऊंचाई;
चयनित item.getElementsByTagName ("svg") [i] .style. उपलब्धता = document.getElementsByTagName ("svg") [i] .getBoundingClientRect () चौड़ाई;
}
html2canvas (selectItem, {backgroundColor: '# 000', allowTaint: true})। फिर (कैनवास =) {।
var myImage = कैनवास।
window.location.href = myImage;
})
के लिए (आइए = 0; मैं <svgCount? i ++) {
चयनित item.getElementsByTagName ("svg") [i] .style.height = '100%';
चयनित Item.getElementsByTagName ("svg") [i] .style. उपलब्धता = '100%';
}

// use html2canvas in react project when i need a screenshot for the svg
/**
 * svg to canvas
 * <strong i="5">@param</strong> targetElem
 * <strong i="6">@return</strong> {Promise<[]>} // return svg elements
 */
async function svgToCanvas(targetElem) {
  let nodesToRecover = [], nodesToRemove = [], svgElems = targetElem.querySelectorAll('svg');

  for (let i = 0; i < svgElems.length; i++) {
    let node = svgElems[i], parentNode = node.parentNode, svg = parentNode.innerHTML,
      canvas = document.createElement('canvas'),
      ctx = canvas.getContext('2d');
    canvas.setAttribute('data-cover', 'svg');
    const v = await Canvg.from(ctx, svg);
    v.start();
    // record svg elements
    nodesToRecover.push({
      parent: parentNode,
      child: node
    });
    parentNode.removeChild(node);
    //  record canvas elements
    nodesToRemove.push({
      parent: parentNode,
      child: canvas
    });

    parentNode.appendChild(canvas);
  }
  return nodesToRecover;
}

/**
 * recover canvas to svg
 * <strong i="7">@param</strong> targetElem
 * <strong i="8">@param</strong> svgElems // need to recover svg elements
 * <strong i="9">@return</strong> *
 */
function recoverCanvasToSvg(targetElem, svgElems) {
  let canvasElems = targetElem.querySelectorAll("canvas[data-cover='svg']");
  if(!targetElem){
    throw new Error('must have targetElem param')
  }
  if(!isArray(svgElems) && svgElems.length !== canvasElems.length) {
    throw new Error('svgElems must be an Array, and it`s length equal to canvasElems`s length')
  }
  for(let i = 0; i < canvasElems.length; i++){
    let node = canvasElems[i], parentNode = node.parentNode;
    parentNode.removeChild(node);
    parentNode.appendChild(svgElems[i]?.child);
  }
}