Html2canvas: التقاط SVG

لا، ليس كذلك. إنه ليس خطأ في المكتبة ، ولكنه خطأ في معظم المتصفحات (أحدث إصدار ثابت من Firefox ، الإصدار 12 ، تم إصلاح هذه المشكلة وهو الوحيد الذي يعمل فيه كما هو متوقع afaik). تكمن المشكلة في أن أي صورة SVG تلوث اللوحة ، مما يجعلها غير قابلة للقراءة. بشكل افتراضي ، يتجاهل html2canvas المحتوى الذي يشوه الصورة ، لأننا نريد إبقاء اللوحة قابلة للقراءة (على سبيل المثال ، إذا كنت تريد استخدام toDataUrl ).

ومع ذلك ، إذا كنت لا تهتم بأن صور SVG تلوث اللوحة القماشية ، فيمكنك تعيين الخيار allowTaint إلى true ويجب أن يتم عرض SVG بشكل صحيح للمتصفحات التي تسمح SVG المضمنة.

أود أيضًا أن أشير إلى أنه إذا كان عرض SVG سيعمل بشكل صحيح عبر المتصفح ، فستصبح هذه المكتبة قديمة تقريبًا ، حيث يمكن استخدام SVG لعرض HTML. لقد التزمت بالفعل ببعض التعليمات البرمجية التي تعمل على تسريع عرض Canvas بشكل كبير على المتصفحات التي يعمل فيها عرض SVG (مثل FF12) ، بالإضافة إلى السماح بدعم جميع خصائص CSS التي يدعمها المتصفح. للحصول على معلومات ، ألق نظرة على https://github.com/niklasvh/html2canvas/blob/master/src/Parse.js#L1227

مرحبا،
شكرا جزيلا لاستجابتك السريعة.
لقد جربت اقتراحاتك: اضبط allowTaint على true كما يلي (تعديل test.js):

setTimeout (الوظيفة () {

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

يتم عرض SVG بنجاح في المثال images.html.

ولكن في حالة تعقيد SVG ، لا يتم عرضها بشكل صحيح في المستعرض المتقاطع. على سبيل المثال: أرغب في التقاط المخطط (http://www.highcharts.com/demo/) ، في Chrome: إنه يلتقط فقط المحور x والمحور y للمخطط عندما يتم عرض المخطط على أنه SVG مضمّن ، في مخطط الحالة تصيير كـ img بمصدر من ملف svg extenal ، فإنه لا يلتقط أي شيء.
على عكس Chrome ، في Firefox ، لا يلتقط أي شيء عند عرض المخطط على هيئة SVG مضمنة ، ولكن يمكنه التقاط المخطط بنجاح عندما يكون المخطط صورة من ملف svg خارجي. الأسوأ في IE9 ، لم يتم التقاط أي شيء.

هل لديك فكرة لحل هذه المشكلة؟

يجب أن يعمل استخدام كصورة مع FF / Chrome. ما يمكنك تجربته هو ما إذا كان عرض لوحة الرسم البسيط باستخدام drawImage يعمل مع SVG.

+1 لهذا. لدي نفس حالة استخدام babyhero ، أحتاج إلى التقاط لقطة شاشة لرسوم بيانية SVG عالية المخططات لأداة إعداد التقارير. قد يكون من الممكن الحصول على جميع SVGs ذات الرسوم البيانية العالية بشكل فردي ، ولكن يتم عرضها ضمن عرض مع معلومات أخرى نرغب في الحصول على إمكانية "حفظ في لقطة الشاشة" لها.

@ babyhero184 لقد تمكنت من التغلب على هذا القيد في html2canvas باستخدام canvg (http://code.google.com/p/canvg/) لتحويل الرسوم البيانية العالية SVG إلى PNG أثناء التنقل ، وإخفاء عناصر SVG وإظهار PNG. ثم التقطت لقطة شاشة أثناء الطيران باستخدام html2canvas ثم أخفيت ملف PNG وأظهرت الرسوم البيانية العالية SVG مرة أخرى. إنها عملية ملتوية (SVG -> canvas -> PNG -> canvas -> PNG) ولكنها تناسب احتياجاتي.

joeyrobert أواجه نفس المشكلة مع المخططات العالية و html2canvas. ستكون مساعدة كبيرة إذا كان بإمكانك مشاركة جوهر الكود الخاص بك.
شكرا مقدما.

joeyrobert @ Jagdeep1 هناك خيار آخر يستخدم Fabric.js لعرض SVG على قماش الرسم ، ثم استرداد صورته.

+1

+1

+1

أي حل لهذه المشكلة؟

يعملmajuansari _SVG_ إلى _Canvas_ و _Canvas_ إلى _image_ في متصفح Firefox ، ولكن يوجد في Chrome قفل أمان.

كنت أستخدم jQuery لالتقاط عناصر المخطط ، واكتشفت أن Highcharts SVG لم يتم تحليله بشكل صحيح عندما فعلت ذلك. إذا قام أي شخص بتمرير محدد jQuery للمخطط ، فقد لا يحتوي على SVG.

mbritton جرب http://code.google.com/p/canvg/ (foreignObject لا يعمل)

نعم ، كان هذا هو الحل.

لقد قمت بحل هذه المشكلة عن طريق استبدال عناصر svg بعناصر قماشية تم إنشاؤها بواسطة canvg أثناء الالتقاط.
هذا هو الكود الخاص بي.

// 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 : بينما يعمل هذا بشكل رائع في Chrome ، هل هناك حل بديل لمتصفح Firefox ، والذي ينتج NS_ERROR_NOT_AVAILABLE في سياق السطر. toDataURL () على الرغم من أن الصورة في نفس المجال؟ لم أتمكن من تشغيله في متصفحات أخرى إلى جانب Chrome ...

gifarangw كودك يعمل بشكل جيد مع المخططات العالية. شكرا لكودك الرائع : +1: الشيء الوحيد الذي أزلته هو اللوحة القماشية. إلى جزء بلوب.

steren شكرًا على الحل الذي إصدارات chrome و Firefox) ، ولا يحتاج إلى مكتبة إضافية وهو أمر جيد. لقد أجريت بعض التغييرات ودمجتها مع الرمز من

    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 fbotti ، لسبب ما لا أدخل في img.onLoad ، وبالتالي ، تختفي الرسوم البيانية (لا يتم استبدالها بالقماش)

أنا أعمل مع amcharts. اي فكرة؟

guypaskar قد تحتاج svg إلى مزيد من $(image).appendTo('body'); إلى الكود قبل تعيين image.onload ، ثم في Firefox سترى أيقونة للصورة غير الصالحة ، يمكنك النقر بزر الماوس الأيمن> عرض الصورة ورؤية الخطأ.

لقد قمت بمحاولة سريعة لـ amcharts svg واضطررت إلى إضافة الخصائص xmlns="http://www.w3.org/2000/svg" width="1400" height="500" إلى علامة svg لجعلها تعمل. (تم تحديد الارتفاع والعرض كخصائص css ، ولكن لسبب ما لم يتم انتقاؤهما.)

لقد وجدت حل بسيط.

تأكد من عرض وارتفاع صورة svg.

لا توجد حجج كافية بخلاف ذلك لأنه لا يمكن قياس svg مثل الصورة.

يمكن لأي شخص في هذه القضية تلخيص؟ هل تم حل المشكلة الأصلية؟ يبدو أن بعض مشكلات المستعرض التي ربما تسببت في غالبية المشكلات المذكورة هنا قد تم إصلاحها منذ عام 2012. وفقًا لبعض التعليقات هنا ، لم تعد هناك حاجة أيضًا لاستخدام مكتبات أخرى مثل canvg؟

بالنسبة للأعداد المتبقية ، هل سيتم تغطيتها بواسطة # 197 و / أو # 267؟ هل يمكن إغلاق هذا؟

لا تزال مشكلة في بعض المتصفحات على الأقل

0.5 يضيف دعمًا لـ SVG's

أي معاينة عند 0.5 يخرج @ niklasvh ؟

IvoPereira يمكنك متابعة حالة 0.5 في # 421

niklasvh لدي الإصدار 0.5 وما زال SVG لا يعرض. هل هناك مثال على كيفية القيام بذلك؟ (إنه ملف SVG مضمن)

nikolang هل html2canvas.js و html2canvas.svg.js ؟ إذا كان الأمر كذلك ، فهل يمكنك توفير jsFiddle أو jsbin لتوضيح مشكلتك المحددة؟

حصلت على هذا العمل. كانت المشكلة أن SVG لم يتم تقديمه بالكامل عندما قمت بعمل html2canvas.

ولكن يبدو أنه لا تزال هناك بعض المشكلات المتعلقة بالعرض. على سبيل المثال http://d3pie.org

هذا ما يفترض أن تبدو عليه:

هذا ما يبدو عليه بعد html2canvas:

توقف ، هذا مخيف جدا. فقط لتسهيل تتبع هذا الأمر ، هل يمكنك فتح مشكلة منفصلة بنفس لقطات الشاشة ورابط لمجرد jsFiddle مع العرض التوضيحي؟ هذا يبتعد كثيرًا عن الإصدار الأصلي الذي تم إغلاقه منذ فترة طويلة. شكرا على الإبلاغ عن ذلك!

أود أن أفعل ذلك ولكني لا أعرف كيفية تضمين html2canvas الجديد في jsfiddle. هل هناك أي رابط خارجي يمكنني استخدامه؟

nikolang يمكنك استخدام http://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.js .

شكر. و SVG- النسخة؟

وبالمثل: http://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.svg.js .

مرحبا،

يتم عرض صور SVG على جانبي ، ولكنها تظهر باللون الأسود ، كما ذكر أحد الأشخاص أدناه. هل هناك طريقة لحساب خاصية "ملء" لعناصر svg؟

brainra ، أنا أستخدم شيئًا كهذا لجعل التعبئة بيضاء:

// 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");

فشل تنفيذ "drawImage" على "CanvasRenderingContext2D": HTMLImageElement المتوفر في حالة "معطل". "

أتلقى هذا الخطأ عندما يكون هناك عنصر svg في HTML.
كما أنني قمت بتعيين allowTaint إلى true. هل يستطيع أحد مساعدتي رجاء؟

أعتقد أنه يجب إعادة فتح هذا - يتم عرض عناصر svg بشكل صحيح في كل متصفح ما عدا Firefox.

NS_ERROR_NOT_AVAILABLE: هذا خطأ في Firefox: https://bugzilla.mozilla.org/show_bug.cgi؟id=700533 (AFAICT) هناك صفحة اختبار تبرز المشكلة (مرتبطة من الخطأ) http://phrogz.net/ SVG / svg_to_png.xhtml

سيكون الحل / الإصلاح موضع تقدير كبير. أو ربما يمكن لشخص ما أن يخدع شخصًا ما

هذا هو الحل الخاص بك:
http://stackoverflow.com/questions/18271898/html-and-svg-to-canvas-javascript/32457864#32457864

لقد جربت ذلك باستخدام الزاوي ولكن انتهى بي الأمر بقطعة قماش ملوثة. أعتقد أنني بحاجة إلى SVG الخام؟

<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 ... ما هو اسم البرنامج المساعد الذي لدي ملحق عند استخدام هذا البرنامج النصي

بشكل أساسي ، يؤدي تعيين عرض / ارتفاع واضح على SVG قبل استدعاء html2canvas إلى إصلاح معظم الحالات بالنسبة لي ..
ما أفعله هو التكرار عبر عناصر SVG المختلفة للاهتمامات ، والحصول على عرض / ارتفاع محسوب في المتصفح باستخدام .getBoundingClientRect () وتعيين خاصية عرض الارتفاع على العنصر ، لقد لاحظت أنه عندما يكون لدى SVG النسبة المئوية ومجموعة العرض / الارتفاع المماثلة ، لكن بالبكسل ، Booyah

لا تزال تواجه مشكلات في عرض امتداد الخطوط المتعددة و div's بالرغم من ذلك

اهلا ياجماعة،
لقد قمت بحل هذه المشكلة (فقدت svg مع Firefox) عن طريق تغيير شفرة المصدر قليلاً.
أولاً ، يجب أن يحتوي عنصر SVG على سمة ارتفاع وعرض ، بغض النظر عن البكسل أم لا.
إذًا يجب عليك تغيير كود المصدر من:
self.image.src = " data: image / svg + xml ،" + (new XMLSerializer ()). serializeToString (عقدة) ؛
إلى:
self.image.src = " data: image / svg + xml ،" + encodeURIComponent ((new XMLSerializer ()). serializeToString (عقدة)) ؛

ثم استمتع بها.

هل لدى أي شخص فكرة عن كيفية استدعاء html2canvas على عنصر SVG في DOM؟

إعطاء مثال قد يكون عظيما!

لا يزال +1 يمثل مشكلة في التقاط لقطة شاشة لعنصر SVG في متصفح Firefox.

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

مرحبًا ، لقد تمكنت من حل هذه المشكلة باستخدام هذا الحل (بدون jQuery):
المحلول

دع targetElem =document.getElementById ('body') ؛
دع nodesToRecover = [] ،
دع 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 ، للأسف ...

سعيد لأنك حصلت على تسوية.
فقط تحققت من JS Fiddle الخاص بك وهو يعرض الصورة.

مع تحياتي،

برنارد تا بيكر

يوم الأربعاء ، 27 مارس ، 2019 الساعة 4:34 مساءً Alessandro Candini [email protected]
كتب:

لقد وجدت حل بسيط.

تأكد من عرض وارتفاع صورة svg.

لا توجد حجج كافية بخلاف ذلك لأنه لا يمكن قياس svg
مثل الصورة يمكن.

هذا صحيح ولكن ليس لـ IE11 ، للأسف ...

-
أنت تتلقى هذا لأنك علقت.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/niklasvh/html2canvas/issues/95#issuecomment-477242192 ،
أو كتم الخيط
https://github.com/notifications/unsubscribe-auth/AM7ZzLPsl0WJS7gGI9npSsRxR33FCnN9ks5va52bgaJpZM4AD-Sb
.

لقد وجدت حلاً مع canvg ، تم الإبلاغ عنه هنا حول تجاوز سعة المكدس : إنه يعمل بشكل مثالي على 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 أليساندرو كانديني ، [email protected]
كتب:

لقد وجدت حلاً باستخدام 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-477503221 ،
أو كتم الخيط
https://github.com/notifications/unsubscribe-auth/AM7ZzKNy1GOgQU9TVv7PGCi4fJvYSxDVks5vbIIOgaJpZM4AD-Sb
.

مرحبًا niklasvh جميل أن ترى مكتبة جافا سكريبت html2canvas ، إنها مكتبة رائعة ، لكن ما زلت أواجه نفس المشكلة لتحويل svg إلى إنشاء لوحة الرسم باستخدام إصدار npm "1.0.0-alpha.12
"بالإضافة إلى إصدار" 1.0.0-rc.1 "أيضًا في تطبيق anguar6 الخاص بنا ، وفقًا لردك من قائمة المشكلات ، ستأتي المشكلة لا تحتوي svg على الارتفاع والعرض ، ولكن في حالتي ، فإن Svg يحتوي الارتفاع والعرض بنسبة 100٪ و div المتداخلة على علامة svg أيضًا ولوحة الرسم الموجودة المتداخلة أيضًا ، يمكنني تصدير صفحتي كصورة png لكن الصورة تحتوي فقط على رموز svg المعطلة ولوحة الرسم الموجودة أيضًا لا يتم عرضها. وشيء آخر بمجرد اكتمال التصدير تظهر جميع صفحتي الأخرى svg كصور محطمة. للرجوع إليها ، أرفقت لقطة الشاشة هنا ، يرجى إلقاء نظرة مرة واحدة وإعلامي شكرًا.
html2canvas (this.screen.nativeElement، {useCORS: true}). ثم (canvas => {
this.canvas.nativeElement.src = canvas.toDataURL ('image / png') ؛
this.downloadLink.nativeElement.href = canvas.toDataURL ('image / png') ؛
this.downloadLink.nativeElement.download = 'screenshot.png'؛
this.downloadLink.nativeElement.click () ،
}) ؛

testpdf (1) .pdf
مرحبا،
أحصل على المحور ولكن باقي مساحة الرسم البياني سوداء. أي اقتراح

مرحبًا niklasvh جميل أن ترى مكتبة جافا سكريبت html2canvas ، إنها مكتبة رائعة ، لكن ما زلت أواجه نفس المشكلة لتحويل svg إلى إنشاء لوحة الرسم باستخدام إصدار npm "1.0.0-alpha.12
"بالإضافة إلى إصدار" 1.0.0-rc.1 "أيضًا في تطبيق anguar6 الخاص بنا ، وفقًا لردك من قائمة المشكلات ، ستأتي المشكلة لا تحتوي svg على الارتفاع والعرض ، ولكن في حالتي ، فإن Svg يحتوي الارتفاع والعرض بنسبة 100٪ و div المتداخلة على علامة svg أيضًا ولوحة الرسم الموجودة المتداخلة أيضًا ، يمكنني تصدير صفحتي كصورة png لكن الصورة تحتوي فقط على رموز svg المعطلة ولوحة الرسم الموجودة أيضًا لا يتم عرضها. وشيء آخر بمجرد اكتمال التصدير تظهر جميع صفحتي الأخرى svg كصور محطمة. للرجوع إليها ، أرفقت لقطة الشاشة هنا ، يرجى إلقاء نظرة مرة واحدة وإعلامي شكرًا.
html2canvas (this.screen.nativeElement، {useCORS: true}). ثم (canvas => {
this.canvas.nativeElement.src = canvas.toDataURL ('image / png') ؛
this.downloadLink.nativeElement.href = canvas.toDataURL ('image / png') ؛
this.downloadLink.nativeElement.download = 'screenshot.png'؛
this.downloadLink.nativeElement.click () ،
}) ؛

نفس المشكلة ، خطأ في العثور على svg في المستند المنسوخ

قبل استخدام html2canvas ، أقوم بضبط الارتفاع والعرض مؤقتًا على SVGs. بهذه الطريقة أنا قادر على التقاط svg.

var selectedItem = document.querySelector (". chartWrapper") ؛
var svgElements = selectedItem.querySelectorAll ('svg') ،
لـ (let i = 0؛ i <svgElements.length؛ i ++) {
selectedItem.getElementsByTagName ("svg") [i] .style.height = document.getElementsByTagName ("svg") [i] .getBoundingClientRect (). height؛
selectedItem.getElementsByTagName ("svg") [i] .style.width = document.getElementsByTagName ("svg") [i] .getBoundingClientRect (). width؛
}
html2canvas (selectedItem، {backgroundColor: '# 000'، allowTaint: true}). ثم (canvas => {
var myImage = canvas.toDataURL ("image / png"). replace ("image / png"، "image / octet-stream")؛
window.location.href = myImage ؛
})
لـ (let i = 0 ؛ i <svgCount ؛ i ++) {
selectedItem.getElementsByTagName ("svg") [i] .style.height = '100٪'؛
selectedItem.getElementsByTagName ("svg") [i] .style.width = '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);
  }
}