html2 canvas svg不能识别的解决方案


Posted in HTML / CSS onJune 03, 2021

  最新有个功能需要截取网页成图片,于是用到比较流行的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'));//直接在原网页显示
                         }                     });                }            }

到此这篇关于html2+canvas svg不能识别的解决方案的文章就介绍到这了,更多相关html2 canvas svg不能识别内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
HTML中fieldset标签概述及使用方法
Feb 01 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
May 03 HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
Jul 29 HTML / CSS
HTML实现代码雨源码及效果示例
Feb 25 HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
Oct 12 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
Oct 24 HTML / CSS
CSS作用域(样式分割)的使用汇总
Nov 07 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 #HTML / CSS
CSS极坐标的实例代码
css height属性中的calc方法详解
Jun 03 #HTML / CSS
html+css实现文字折叠特效实例
html+css实现分层金字塔的实例
html+css实现赛博朋克风格按钮
HTML+CSS制作心跳特效的实现
You might like
php 文件状态缓存带来的问题
2008/12/14 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
php实现三级级联下拉框
2016/04/17 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
深入理解js promise chain
2016/05/05 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
vue自定义一个v-model的实现代码
2018/06/21 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
pygame实现贪吃蛇游戏(下)
2019/10/29 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
运动会解说词100字
2014/01/31 职场文书
小学生元旦广播稿
2014/02/21 职场文书
新文化运动的基本口号
2014/06/21 职场文书
倡议书的写法
2014/08/30 职场文书
交通安全横幅标语
2014/10/07 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书