html2canvas实现页面截图

1. npm install html2canvas -s　　　　安装插件
2. 代码示例如下：

<template>

　　<div class="content-code" ref="getImg">

　　　　//需要截取的部分

　　</div>

</template>

 

<script>

　　import html2canvas from "html2canvas";　// 引入插件

　　export default {

　　　　mounted(){

　　　　　　//调用方法获取图片地址

　　　　　　const img = await this.convertToImage(this.$refs.getImg);　　//传入的参数是盒子节点

　　　　},

　　　　methods:{　　

    　　　　convertToImage(container) {
      　　　　// 设置放大倍数
      　　　　const scale = window.devicePixelRatio;
      　　　　// html2canvas配置项
      　　　　const ops = {
        　　　　scale,
        　　　　useCORS: true,
        　　　　allowTaint: false,
      　　　　};


      　　　　return html2canvas(container, ops).then((canvas) => {
        　　　　// 返回图片的二进制数据
       　　 　　　return canvas.toDataURL("image/png");
      　　　　});
    　　　　},

　　　　}

　　}

</script>