Solution to HTML2 canvas SVG not being recognized

Solution to HTML2 canvas SVG not being recognized

There is a new feature that requires capturing a web page as an image, so I used the popular html2canvas. I thought I could do it smoothly, but later I found that the flow chart connection lines on the web page were not in the screenshot. So I searched a lot on Baidu and Bing, but it seems that there is no complete code. Now I have solved it myself and share the code.

First you need to download canvg.js, github address: https://github.com/canvg/canvg

function showQRCode() {
                scrollTo(0, 0);
               
                if (typeof html2canvas !== 'undefined') {
                    //The following is the processing of svg var nodesToRecover = [];
                    var nodesToRemove = [];
                    var svgElem = $("#divReport").find('svg'); //divReport is the id of the dom that needs to be captured as an image
                    svgElem.each(function (index, node) {
                        var parentNode = node.parentNode;
                        var svg = node.outerHTML.trim();

                        var canvas = document.createElement('canvas');
                        canvg(canvas, svg); 
                        if (node.style.position) {
                            canvas.style.position += node.style.position;
                            canvas.style.left += node.style.left;
                            canvas.style.top += node.style.top;
                        }

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

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

                        parentNode.appendChild(canvas);
                    });
                    html2canvas(document.querySelector("#divReport"), {
                        onrendered: function(canvas) {
                            var base64Str = canvas.toDataURL(); //base64 code, can be converted to image//...

                            $('<img>',{src:base64Str}).appendTo($('body'));//Display directly on the original web page} }); } }

This is the end of this article about the solution to the problem of html2+canvas svg not being recognized. For more related content about html2 canvas svg not being recognized, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<:  JavaScript to achieve simple provincial and municipal linkage

>>:  Steps to install MySQL using Docker under Linux

Recommend

Use the CSS border-radius property to set the arc

Phenomenon: Change the div into a circle, ellipse...

js realizes the magnifying glass function of shopping website

This article shares the specific code of js to re...

Nodejs error handling process record

This article takes the connection error ECONNREFU...

Computed properties and listeners details

Table of contents 1. Calculated properties 1.1 Ba...

MySQL cursor functions and usage

Table of contents definition The role of the curs...

Detailed process of installing logstash in Docker

Edit docker-compose.yml and add the following con...

Solve the problem of MySql8.0 checking transaction isolation level error

Table of contents MySql8.0 View transaction isola...

CSS3 sample code to achieve element arc motion

How to use CSS to control the arc movement of ele...

Several ways of running in the background of Linux (summary)

1. nohup Run the program in a way that ignores th...

How to create a my.ini file in the MySQL 5.7.19 installation directory

In the previous article, I introduced the detaile...

The difference between Input's size and maxlength attributes

I recently used the input size and maxlength attri...

Summary of common commands in Dockerfile

Syntax composition: 1 Annotation information 2 Co...