html2canvas

//安装
npm install --save html2canvas
//导入
import html2canvas from 'html2canvas'
1.在template模板中
 <template>
     <!-- 把要截图的元素放在一个元素里,设置一个ref -->
     <section class="image_tofile" ref="imageTofile">
         <!-- 元素内部放置要合成图片的内容 -->
         <img class="poster-img" :src="personalBill" alt="">
         <p class="poster-text">注意元素的样式，有些样式不能被截屏</p>
         <p class="poster-text">不要用背景图片，用img标签防止截图模糊</p>
     </section>
</template>
//methods 使用
methods: {
    // 页面元素转图片
    toImage() {
        // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
        return html2canvas(this.$refs.imageTofile, {
            backgroundColor: null, // 背景颜色
            dpi: 192, // 将分辨率提高到特定的dpi,默认值为96
            scale: 2, // 用于渲染的比例尺。默认为浏览器设备像素比率。默认值是1，手机端设置成2
            useCORS:true, // 是否尝试使用CORS从服务器加载图像
        }).then((canvas) => {
            this.posterUrl = canvas.toDataURL('image/png')//获取的图片地址
        })
    },
},