angular中html2canvas简单应用

官方最新版本 ^1.0.0-rc.7

网上会有一些其他版本不建议使用，用官方版本就好了
http://html2canvas.hertzen.com/

项目背景

一个找工作的详情页面，需要把页面截图成海报分享出去，要加上背景图片，这时候就用到了html2canvas

使用html2canvas中的一些注意问题

1.background-image属性设置背景图片，生成出来时图片会模糊：
所以要把背景图片拿出来用css模拟背景图片的样子

  <div class="job-cc" id="jobdetail">
        <img class="job-img" id="jobbackimg" src="http://localhost:4200/assets/img/poster-back.png">
        <div class="job-content" >
            <p style="text-align: center;font:20px blob;">job-details works!</p>
            <div>
                <img style="width: 100%;" src="assets/img/quan-yi-shuo-ming.png">
            </div>
            <app-btn type='' text="分享海报" (click)="getCanvasImg()">
            </app-btn>
            <p style="text-align: center;font:20px blob;">job-details works!</p>
            <p style="text-align: center;font:20px blob;">job-details works!</p>
            <p style="text-align: center;font:20px blob;">job-details works!</p>
            <p style="text-align: center;font:20px blob;">job-details works!</p>
            <p style="text-align: center;font:20px blob;">job-details works!</p>
            <p style="text-align: center;font:20px blob;">job-details works!</p>
            <p style="text-align: center;font:20px blob;">job-details works!</p>
            <p style="text-align: center;font:20px blob;">job-details works!</p>
        </div>
    </div>

2.onclone函数使用
html2canvas会把传给他的所以dom节点拷贝到一个虚拟节点中，在拷贝结束后执行onclone函数，在onclone函数中修改节点不会影响真实dom。
这篇文章写的比较详细：https://www.welefen.com/post/html2canvas-with-svg.html

  getCanvasImg(){
    let body= document.getElementById('jobdetail'); //获取dom  
    html2canvas(body,{
      scale:2,
      onclone(doc){
        let backimg= doc.getElementById('jobbackimg');
        backimg.style.display='block';
      }
    }).then( (canvas)=> {
      console.log('success');
      let imgUri = canvas.toDataURL("image/jpeg",1); // 获取生成的图片的url     base64数据
      this.imgUrl = imgUri; // 显示图片   
    });  
  }

3.scale ：用于渲染的比例尺。默认为浏览器设备像素比率。
设置scale为2，这样图片生成会清晰一些，但是图片体积会变大

只是做一些简单的使用，就用了很长一段时间

之前在网上看其他版本就去安装了，结果生成的图片清晰了一些，但是onclone函数不能执行了…