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

JavaScript built-in date and time formatting time example code

1. Basic knowledge (methods of date objects) 😜 ge...

Deep understanding of the mechanism of CSS background-blend-mode

This article is welcome to be shared and aggregat...

How to package the project into docker through idea

Many friends have always wanted to know how to ru...

Win10 install Linux ubuntu-18.04 dual system (installation guide)

I installed a Linux Ubuntu system on my computer....

Learn the operating mechanism of jsBridge in one article

Table of contents js calling method Android 1.js ...

How to configure environment variables in Linux environment

JDK download address: http://www.oracle.com/techn...

SQL ROW_NUMBER() and OVER() method case study

Syntax format: row_number() over(partition by gro...

Summary of Several Methods for Implementing Vertical Centering with CSS

In the front-end layout process, it is relatively...

Example analysis of mysql stored procedure usage

This article describes the usage of MySQL stored ...

Vue uses canvas handwriting input to recognize Chinese

Effect picture: Preface: Recently, I was working ...

CentOS 7.5 deploys Varnish cache server function

1. Introduction to Varnish Varnish is a high-perf...

How to mount the CD to find the rpm package under Linux

Written in front Sometimes you need to install so...