最新有个功能需要截取网页成图片,于是用到比较流行的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

html2canvas不能识别svg的解决方案的更多相关文章

  1. SVG Sprite 入门(SVG图标解决方案)

    关于浏览器图标解决方案,一直就有很多 CSS Sprite,Icon Font,CSS Icon以及SVG.相对而言svg矢量图标以及支持浏览器自身解析的优点,很多团队都已经在使用了.这篇文章主要说明 ...

  2. html2canvas 识别 svg 解决方案

    参考: 预览地址 http://jsfiddle.net/bv16o50f/1/ html <div class="visualization"> <svg xm ...

  3. Android---真机调试时不能识别手机的解决方案

    我自己遇到的问题是VS2013和VS2015中xamarin无法识别到真机,现象就是插上手机开启调试模式,豌豆荚都可以连接上手机,就是VS上没出现手机. 但是低版本的手机貌似又行,4.0.3的. 于是 ...

  4. VMware虚拟机无法识别U盘解决方案

    1. 本机情况: Win7操作系统,VMware虚拟机,虚拟机版本:VMware 7.1,安装Ubuntu10.10,现要求在主机上插入U盘,在虚拟机中显示.   2. 遇到问题: U盘只在Win7主 ...

  5. idea安装proto插件后不能识别.proto文件解决方案

     just had a try and it worked well. Could you please check "File Types" in IDEA? Open &quo ...

  6. LINQ to Entities 不识别方法的解决方案

    //这样不行 var   BrushProducTimeout = aliexpressEntities.CP_BrushProduc.Where(p => p.isActive == true ...

  7. mysql中文显示问号,不能识别中文的解决方案

    到后台mysql中查看是问号. 并不能显示出中文,初步判定是编码的问题. 我们利用 show variables like'character_set_%'; 与 show variables lik ...

  8. html2canvas以及domtoimage的使用踩坑总结

    前言 首先做个自我介绍,我是成都某企业的一名刚刚入行约一年的前端,在之前的开发过程中,遇到了问题,也解决了问题,但是在下一次解决相同问题的时候,只对这个问题有一丝丝的印象,还需要从新去查找,于是,我注 ...

  9. mac下无法识别手机usb问题

    一.无论是mac还是windows下连接手机调试android程序,一定要确认手机开启了usb调试.如果没有开启请参考我的步骤.      设置->关于手机->版本号    连续点击版本号 ...

随机推荐

  1. Python自动化--语言基础3--字典、函数、全局/局部变量

    字典 dict1 = {'name':'han','age':18,'class':'first'} print(dict1.keys()) #打印所有的key值 print(dict1.values ...

  2. mysql5.7中解决中文乱码的问题

    在使用mysql5.7时,会发现通过web端向数据库中写入中文后会出现乱码,但是在数据库中直接操作SQL语句插入数据后中文就显示正常,这个问题怎么解决呢?此处不对mysql的数据编码过程和原理进行讲解 ...

  3. js中的isNaN()函数

    <html> <head> <script type="text/javascript" src="function.js"> ...

  4. Maven中解决依赖冲突的问题

    1.短路优先:谁离得最近就使用谁的依赖jar包 C到达A为C->B->A C到达B为C->B 例如: A中的 commons-io的版本为2.4 B中的commons-io的版本为2 ...

  5. Elasticsearch教程-从入门到精通(转载)

    转载,原文地址:http://mageedu.blog.51cto.com/4265610/1714522?utm_source=tuicool&utm_medium=referral 各位运 ...

  6. J2ee的13个规范

    以下来自于网络. 1.JDBC(java Database Connectivity): JDBC API为访问不同的数据库提供了一种统一的途径,就像ODBC一样,JDBC对开发者屏蔽了一些细节问题, ...

  7. sphinx初识

    sphinx(SQL Phrase Index),查询词组索引. 定义:Sphinx是一个全文检索引擎. 特性: 1.高速索引 (在新款CPU上,近10 MB/秒); 2.高速搜索 (2-4G的文本量 ...

  8. iOS-UI控件优化

    一.tableView的优化 tableView作为iOS开发中使用最为频繁的控件之一,对其进行优化,对整个应用性能的提升显得至关重要.官方设计的框架中,已经包含了UITableViewCell的重用 ...

  9. Java集合框架(六)—— Collections工具类

    操作集合的工具类Collections Java提供了一个操作Set.List和Map等集合的工具类:Collections,该工具类里提供了大量方法对集合元素进行排序.查询和修改等操作,还提供了将集 ...

  10. python+selenium+autoit实现文件上传

    问题 在做web端ui层自动化的时候会碰到文件上传的操作,经常有朋友问到,这里总结一下 解决方案 第一种:type=file的上传文件,类似如下的 使用类似这样的代码就可以完成: driver.fin ...