html网页截图功能支持svg图片保存

根据自己的需求选取对应代码片段，可以节省50%的时间。

现在用到最多的页面截取插件就是html2canvas。将页面转化为canvas进行保存
但是为了兼容支持svg页面的截图，会先将svg页面转化成canvas，再将canvas进行保存

文末有演示代码，可直接使用代码

仅需要支持网页截取功能，页面中无svg图片

html代码片段
《皮皮侠踢皮球》页面中存在svg图片、存在svg普通标签<circle> 、html标签<button>
实验证明除了svg图片，其他标签都是可以使用html2canvas进行截图的。

    <div class="container"><button class="capture">截图</button><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="100" height="100" preserveaspectratio="none meet" xlink:href="./image/test.png"></image><circle r="20" cx="100" cy="100" stroke="black" fill="red"></circle></svg></div>

js代码片段
html2canvas版本 - html2canvas 1.0.0-alpha.12 https://html2canvas.hertzen.com

 <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>var oBtn = document.querySelector(".capture");oBtn.addEventListener("click", function () {html2canvas(document.body).then(canvas => {`在这里插入代码片`document.body.appendChild(canvas)});});

支持网页截取功能，页面中有svg图片

这里比较麻烦，主要是需要先将svg标签内的所有元素先转化为canvas再进行保存
这一部分功能主要体现在js代码中，不过需要注意的是svg标签和svg的图片都需要设定宽高不然会有bug存在！！！
html代码

        <button class="capture">截图</button><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"style="width:300px;height:150px;"><image width="100" height="100" preserveaspectratio="none meet" xlink:href="./image/test.png"></image><circle r="20" cx="100" cy="100" stroke="black" fill="red"></circle></svg><a id="down_button" style="display:none"></a>

js 代码
canvg -2.0.0 - beta.1 将svg转化为canvas https://github.com/canvg/canvg
html2canvas 0.5.0-beta3 将canvas进行图片保存 http://html2canvas.hertzen.com
两次引用的html2canvas版本不同

    <script src="./src/canvg.min.js"></script><script src="./src/html2canvas.min.js"></script>var oBtn = document.querySelector(".capture");oBtn.addEventListener("click", function () {// 转化成canvasvar targetDom = $("body");// 将当前页面DOM克隆var copyDom = targetDom.clone();copyDom.find('svg').each(function (index, node) {var parentNode = node.parentNode;var svg = node.outerHTML.trim();var canvas = document.createElement('canvas');canvg(canvas, svg, {ignoreAnimation: false,log: true});if (node.style.position) {canvas.style.position += node.style.position;canvas.style.left += node.style.left;canvas.style.top += node.style.top;}parentNode.removeChild(node);$(parentNode).prepend($(canvas));});$('html').prepend(copyDom);targetDom.hide();// 将克隆的页面（已转化成canvas）保存成图片格式，并下载html2canvas(copyDom, {allowTaint: true,taintTest: false,background: '#fff',logging: true,onrendered: function (canvas) {var timestamp = Date.parse(new Date());// 将图片通过a链接下载// canvas.toDataURL() - base64格式$('#down_button').attr('href', canvas.toDataURL());$('#down_button').attr('download', timestamp + '.png');var fileObj = document.getElementById("down_button");fileObj.click();// 将clone页面删除copyDom.remove();targetDom.show();}});});

注意点

DOM中svg以及svg中图片需要设置宽高
html2canvas需要在服务器上运行，官网提供的cdn方式引用支持本地访问
两次演示运用的html2canvas版本不同 alpha1.0 和beta3.0

主要用的插件以及地址

html2canvas 将页面保存在canvas进行图片保存 http://html2canvas.hertzen.com
canvg 将页面中的svg转化为canvas http://html2canvas.hertzen.com

演示用代码放在了github

npm install
npm run server 后可使用
地址：https://github.com/YANhappiness/Notes/tree/master/capture

html网页截图功能支持svg图片保存相关推荐

unity3d 使用存档图片_Unity3D截图功能总结，并保存在指定的文件夹
快过新年了,一直在加班赶项目,没时间写博客,今天上班最后一天,就休息过年了,将我强几天在做一个截图功能分享出来,网上查了很多,但是都是在Unity Editor下好使,能截图,并显示出来,但是,在An ...
matlab：实现“必应”的图片搜索功能并将图片保存
目录 1. 输入 1.1 形式1 1.2 形式2 2. 输出 3. 源代码 4. 原理简述 1. 输入 1.1 形式1 findpic('高山') % 直接输入搜索词,默认建立当前路径下以搜索词为名的 ...
C#实现网页截图功能
//需要添加System.Drawing及System.Windows.Forms引用 using System; using System.Drawing; using System.Drawing ...
网页分享功能支持微信二维码 qq空间 qq好友新浪微博百度贴吧豆瓣人人...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Chrome网页截图功能
第1步:F12 (打开开发者工具) 第2步:Ctrl+Shift+P (呼出查找框) 第3步:选择Capture full size screenshot(保存当前完整网页为图片)
qq截图功能自带图片转文字功能
浏览器-在网页中使用自定义截图功能
总结一下目前了解到的网页截图功能实现一 dom-to-image 1 npm地址: https://www.npmjs.com/package/dom-to-image 2 介绍: dom-to-i ...
php 应用截图,PHP应用：php使用CutyCapt实现网页截图保存的方法
<PHP应用:php使用CutyCapt实现网页截图保存的方法>要点: 本文介绍了PHP应用:php使用CutyCapt实现网页截图保存的方法,希望对您有用.如果有疑问,可以联系我们. 本 ...
网页设计师为什么要用SVG图片？
在普通人眼中, SVG(Scalable Vector Graphics,可伸缩矢量图)可能最多就是在某些网站偶尔看到而已,最多只是知道这是某种图片格式,并不会对这种格式产生任何多余的想法.但是对于网 ...

html网页截图功能支持svg图片保存

仅需要支持网页截取功能，页面中无svg图片

支持网页截取功能，页面中有svg图片

注意点

主要用的插件以及地址

演示用代码放在了github

html网页截图功能支持svg图片保存相关推荐

最新文章

热门文章