如何使用html2canvas.js实现页面截图并显示或上传

　　介绍

小编给大家分享一下如何使用html2canvas.js实现页面截图并显示或上传,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

<强>一、导入html2canvas。js

这个不需要多说,可以从github上获取:https://github.com/niklasvh/html2canvas

也可以直接导入链接:<代码> & lt;脚本https://www.yisu.com/zixun/src=" https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js ">

使用起来也非常简单,具体的API可以去网上查,找生成png图片使用“图像/png”即可。

其中(“# xxx")美元为你想要截取的div,外面可以通过jquery获取它,当然文档获取也是可以的。

html2canvas(美元(“# xxx"), { 　　,,,,,,,,onrender:, function (画布),{ 　　,,,,,,,,,,,,var  url =, canvas.toDataURL(“图像/png"); 　　url=, window.location.href ; 　　,,,,,,,,,,} 　　,,});

其它类型的图片如jpg,为图像/jpeg等等,可自行查询API。

到这里其实简单的截图已经完成了,如果界面稍微复杂一点的话,可能就会出现各种坑、下面一个一个解决。

<强>二,svg无法截取的问题

当我们截取一个div时,如果这个div中存在svg标签,一般情况下是截取不到的,比如截取一个流程图,得到的是下面这个样子:

如何使用html2canvas。js实现页面截图并显示或上传

可以看的到,流程图的线没有截取到,也就是svg没有截取到,这时的解决方法是把svg转换成画布再进行截图即可,直接上代码。

这里的每个循环是循环所有的svg标签,将它们全部转换为画布

if  (typeof  html2canvas  !==, & # 39;未定义# 39;),{ 　　,,,,,,,//以下是对svg的处理 　　,,,,,,,var  nodesToRecover =, []; 　　,,,,,,,var  nodesToRemove =, []; 　　,,,,,,,var  svgElem =, cloneDom.find (& # 39; svg # 39;); 　　,,,,,,,svgElem.each (function (指数,节点),{ 　　,,,,,,,,,,,var  parentNode =, node.parentNode; 　　,,,,,,,,,,,var  svg =, node.outerHTML.trim (); 　　 　　,,,,,,,,,,,var  canvas =, document.createElement(& # 39;帆布# 39;); 　　,,,,,,,,,,,canvas.width =, 650; 　　,,,,,,,,,,,canvas.height =, 798; 　　,,,,,,,,,,,canvg(画布,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 ({ 　　,,,,,,,,,,,,,,,父母:,parentNode, 　　,,,,,,,,,,,,,,,孩子:节点 　　,,,,,,,,,,,}); 　　,,,,,,,,,,,parentNode.removeChild(节点); 　　 　　,,,,,,,,,,,nodesToRemove.push ({ 　　,,,,,,,,,,,,,,,父母:,parentNode, 　　,,,,,,,,,,,,,,,孩子:帆布 　　,,,,,,,,,,,}); 　　 　　,,,,,,,,,,,parentNode.appendChild(画布); 　　,,,,,,,}); 　　,,,,,,, 　　以前,,}

这里需要用到canvg.js,以及它的依赖文件rgbcolor。js,网上可以直接下载,也可以直接导入。

<强>三,背景透明的问题

这个其实很简单,因为它默认是透明的,html2canvas中有一个参数背景就可以添加背景色,如下:

html2canvas (cloneDom, { 　　,,,,,onrender:,函数(画布),{ 　　,,,,,,,,,,var  url =canvas.toDataURL(“图像/png"); 　　,,,,,}, 　　,,,,,背景:“# fafafa" 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

如何使用html2canvas.js实现页面截图并显示或上传