需求: 将html页面 截图保存到本地

方案: html2canvas 将html 生成canvas 然后使用canvas的toDataURL转换为base64 形式 做下载

安装 官网地址: http://html2canvas.hertzen.com/

npm     npm install --sava html2canvas
yarn    yarn add html2canvas
在线js  <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

该库在以下浏览器（使用 Promise polyfill）上应该可以正常工作：

Firefox 3.5+

Google Chrome

Opera 12+

Safari 6+

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
以上是搬运的官网例子
要element使用带有一些（可选）选项的html2canvas呈现，只需调用html2canvas(element, options);
html2canvas(document.body,{第二个参数可配置}).then(function(canvas) {
    document.body.appendChild(canvas);
常用配置 以下为我使用的配置 具体配置(http://html2canvas.hertzen.com/configuration)
名称默认用于
scale
window.devicePixelRatio
用于渲染的比例。默认为浏览器设备像素比率。可以解决不清晰问题
width
Element width
宽度 canvas
height
Element height
高度 canvas
logging
启用日志以进行调试
allowTaint
false
是否允许跨域图像污染画布
* 获取滚动条的位置，body绝对定位，top值为负当前滚动条的位置。 用于解决截图上方白屏问题
var y = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
$('body').css({
  position: 'fixed',
  top: `-${y}px`,
* 生成海报以后 滚动条设置回到原来的位置
$('body').css({
  position: 'static',
window.scrollTo(0, y);
二、网络图片截图不显示
解决  配置中允许网络图片
   html2canvas(canvasObj, {
       allowTaint: true,
       scale: window.devicePixelRatio,  //像素比
       useCORS: true,                   //允许服务器图片
       height: canvasObj.scrollHeight,//canvas高
       width: canvasObj.scrollWidth,//canvas宽
       backgroundColor: "#fb7299",
       logging: false
   }).then((canvas) => {
    　console.log(canvas);
三、ios截图空白 安卓正常 
问题 怀疑是回到 解决第一个问题的时候  回到顶部又直接回到位置 导致 ios 啥也没看到 
解决 将生成canvas 变成异步的  
var y = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
$('body').css({
   position: 'fixed',
   top: `-${y}px`,
setTimeout(() => {
 //获取html元素 可以指定元素 也可以直接document.body  此处是指定的
 let canvasObj = document.querySelector('.boss-box');
 html2canvas(canvasObj, {
       allowTaint: true,
       scale: window.devicePixelRatio,  //像素比
       useCORS: true,                   //允许服务器图片
       height: canvasObj.scrollHeight,//canvas高
       width: canvasObj.scrollWidth,//canvas宽
       backgroundColor: "#fb7299",
       logging: false
   }).then((canvas) => {
    　console.log(canvas);
 　　 //通过canvas.toDataURL() 生成dataurl   图片类型 'image/png' 图片质量 1 
      let base64 = canvas.toDataURL("image/png", 1);
      // 当生成海报之后，再把滚动条设置回原来的位置。
      $('body').css({
           position: 'static',
      window.scrollTo(0, y);
  }, 500)
四、设置的背景颜色没有了  解决利用opt设置背景色
 html2canvas(canvasObj, {
       allowTaint: true,
       scale: window.devicePixelRatio,  //像素比
       useCORS: true,                   //允许服务器图片
       height: canvasObj.scrollHeight,//canvas高
       width: canvasObj.scrollWidth,//canvas宽
       backgroundColor: "#fb7299",      背景色
       logging: false
   }).then((canvas) => {
    　console.log(canvas);
五、对于截出来的图片不清楚的问题 
我看很多博客里说 可以将canvas放大几倍 然后生成的时候按照比例缩小  巴拉巴拉....小魔仙   之类的 
还有在opt中设置dpi 和 scale 
例如 这样的  
var opts = {
    dpi: window.devicePixelRatio * 4,
    scale: scale, 
我是按照官网这样配置的 
var opts = {
    scale: window.devicePixelRatio
截图出来就是 图片依旧不清楚 就很郁闷    文字都很清楚 但是图片不行 你说郁闷不郁闷  然后我就骗产品小哥哥 就是这样的 不然图片里的内容我自己填文字....  于是蒙混过关 
 今天闲着 就又不死心的来了  准备看看有没有好的代码可以抄抄   !!!!!!   
看到设置这些清晰方式的前提  是 不要使用 background-color 内置图片 请使用 <img /> 否则一切配置都是徒劳 地址：https://blog.csdn.net/Young_Gao/article/details/101538930
 换成img 以后 看看这图  相当的高清 very good 可算是把心放下来了 ...   来自一个不服输的小可爱.....
六、对于截出来的 图片 有锯齿的问题 
请教了大佬以后 说是切图的上下左右留一些空白 就可以  可能是浏览器算像素点遇到小数的问题 
也确实解决了  在此感谢ul老师 重新调整了切图  (当然他也看不见)
 再后来查阅资料的过程中发现有方法可以解决 (不过既然图的换了我就没有在试 是否可以解决了  有兴趣的小伙伴可以尝试 然后来告诉我 )
 照抄代码如下 地址 https://blog.csdn.net/lmastersparkl/article/details/109205352?utm_medium=distribute.pc_relevant.none-task-blog-title-7&spm=1001.2101.3001.4242
　　　　 var context = canvas.getContext('2d');
        // 【重要】关闭抗锯齿
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;
以上就是大概的心酸路程   ............ 拿到base64以后 
保存相册或者分享长图
pc端下载   (download的第二个参数 可以自定义图片名称)
const a = document.createElement('a');
a.setAttribute('download', '长图');
a.setAttribute('href', base64);
a.setAttribute('id', 'downloadImg');
if (!document.getElementById('downloadImg')) {
  document.body.appendChild(a);
a.click();