html2canvas实现网页保存为图片

版权声明：本文为博主（风轻云淡）原创文章，未经博主允许不得转载。CSDN https://blog.csdn.net/qq_20343517/article/details/83308950

今天我们来学习一波怎么将一个网页生成一张图片的，主要的应用场景在，分享，截图等
我主要使用的是一个js库 html2canvas ,下面来了解一下他的详细用法吧。

大家可以去这里https://download.csdn.net/download/qq_20343517/10739325下载这个库
然后直接通过script标签引入或者通过其他方式导入也可以。

基于html2canvas.js 可将一个元素渲染为canvas，只需要简单的调用，html2canvas(element[,options]);即可，下列html2canvas方法会返回一个包含有canvas元素的promise：

html2canvas(document.body,{useCORS: true}).then(function(canvas) {
   document.body.appendChild(canvas);
});

• 由于canvas对于图片资源的同源限制，经测试，同时包含cdn图片和本地图片的资源的页面，只有本地图片能够被渲染出来。

canvas转img

方案一：基于原生canvas的 toDataURL 方法将canvas输出为 data:url 类型的图片地址，再将该图片的地址赋值给 image 元素的src属性即可，

方案二：使用第三方库 Canvas2Image.js 调用其 convertToImage 方法即可

<div id="box">
    <h1>hello world</h1>
    <img style="width:100px;" src="abc.png" alt="">
    <p style="background-color:#000;color:#fff;border:1px solid red;">我是一只大灰狼</p>
</div>
<a href="#" id="a" download>点击下载图片</a>

html2canvas(document.getElementById("box"),{useCORS: true}).then(function(canvas) {
    url=canvas.toDataURL();
    a=document.querySelector('#a');
    a.href=url;
});

高保真图片

可以参考这个链接https://segmentfault.com/a/1190000011478657