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
Table of contents Purpose npm init and package.js...
1. Property List Copy code The code is as follows:...
Table of contents 1. Problems encountered 2. Anal...
Preface Today, I was reviewing the creational pat...
Effect: First create five vue interfaces 1.home.v...
1. First find the Data file on the migration serv...
This article shares the specific code for impleme...
The <area> tag defines an area in an image ...
Table of contents 1. Demand Method 1 Method 2 Met...
This article shares the specific code of the WeCh...
Preface When the system space usage is too large ...
This article uses examples to illustrate the tabl...
The file name of the dynamic library file under L...
Installation The required documents are provided ...
Let's take a look at zabbix monitoring sqlser...