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>

 

标签：截图,scale,container,插件,html2canvas,canvas,const,页面
来源： https://www.cnblogs.com/joker-sqr/p/16541160.html