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实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 HTML / CSS
CSS3 实现的加载动画
Dec 07 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
Jan 26 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
Mar 24 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
Dec 17 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 HTML / CSS
canvas绘制图片drawImage使用方法
Sep 15 HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 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
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
PHP把JPEG图片转换成Progressive JPEG的方法
2014/06/30 PHP
理解Javascript_05_原型继承原理
2010/10/13 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
2013/06/08 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
深入理解js中this的用法
2016/05/28 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
webpack入门+react环境配置
2017/02/08 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
python 遍历列表提取下标和值的实例
2018/12/25 Python
Python semaphore evevt生产者消费者模型原理解析
2020/03/18 Python
送给他或她的礼物:FUN.com
2018/08/17 全球购物
行政管理人员精品工作推荐信
2013/11/04 职场文书
饲料采购员岗位职责
2013/12/19 职场文书
幼儿园教学管理制度
2014/02/04 职场文书
上课玩手机检讨书
2014/02/08 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书
人身意外保险授权委托书
2014/10/01 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
Redis如何实现分布式锁
2021/08/23 Redis
解决Redis启动警告问题
2022/02/24 Redis