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 npm Install the loader Import P...
It’s National Day, and everyone is eager to celeb...
Table of contents Precautions Necessary condition...
This article introduces how to configure Nginx to...
This article mainly introduces the implementation...
Implementation of transactions The redo log ensur...
Table of contents TOKEN Timer Refresher 2. Intern...
Table of contents What is the Apollo Configuratio...
1. Basic usage examples of float 1. Let's fir...
Table of contents Preface Fix infinite loop in fo...
When I was printing for a client recently, he aske...
Question Guide 1. How does Hadoop 3.x tolerate fa...
This article example shares the specific code of ...
1. Import csv file Use the following command: 1.m...
BackUpMysql.sh script #!/bin/bash PATH=/bin:/sbin...