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

Specific use of Node.js package manager npm

Table of contents Purpose npm init and package.js...

DIV common attributes collection

1. Property List Copy code The code is as follows:...

Summary of 6 solutions for implementing singleton mode in JS

Preface Today, I was reviewing the creational pat...

An example of how Vue implements four-level navigation and verification code

Effect: First create five vue interfaces 1.home.v...

Detailed explanation of how to migrate a MySQL database to another machine

1. First find the Data file on the migration serv...

js object-oriented method to achieve drag effect

This article shares the specific code for impleme...

Detailed explanation of HTML area tag

The <area> tag defines an area in an image ...

How to achieve seamless token refresh

Table of contents 1. Demand Method 1 Method 2 Met...

WeChat applet implements a simple dice game

This article shares the specific code of the WeCh...

Detailed explanation of Linux dynamic library generation and usage guide

The file name of the dynamic library file under L...

MySQL8 Installer version graphic tutorial

Installation The required documents are provided ...

Detailed explanation of the process of zabbix monitoring sqlserver

Let's take a look at zabbix monitoring sqlser...