zoukankan      html  css  js  c++  java
  • html2canvas不能识别svg的解决方案

      最新有个功能需要截取网页成图片,于是用到比较流行的html2canvas,本来以为能顺顺利利的搞定,后来发现网页上的流程图连接线不在截图中。于是各种百度、bing,也搜到好多,但是感觉没有一个完整的代码,现在自己解决了,分享下代码。

      

      首先需要下载canvg.js,github地址:https://github.com/canvg/canvg

    function showQRCode() {
                    scrollTo(0, 0);
                   
                    if (typeof html2canvas !== 'undefined') {
                        //以下是对svg的处理
                        var nodesToRecover = [];
                        var nodesToRemove = [];
                        var svgElem = $("#divReport").find('svg');//divReport为需要截取成图片的dom的id
                        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码,可以转图片
    
                                //...
    
                                $('<img>',{src:base64Str}).appendTo($('body'));//直接在原网页显示
                             } 
    });
    }
    }

    by QJL

  • 相关阅读:
    Python-pymysql
    MySQL学习(3)
    MySQL学习(1)
    MySQL与PostgreSQL哪个更好?
    svn与git区别
    journalctl常用命令
    Spring Cloud 生产环境性能优化
    springcloud优雅停止上下线与熔断
    istio基础详解
    微服务的全链路监控
  • 原文地址:https://www.cnblogs.com/QiuJL/p/7365161.html
Copyright © 2011-2022 走看看