vue 项目使用html2canvas截取屏幕图片

html2canvas是什么？

官网介绍：About - html2canvas (hertzen.com)

html2canvas是一个插件，它可以使web端像手机一样截屏。 用起来也是非常简单，无需任何配置，安装/引用即可

需求：前端有展示二维码的场景，然后用户点击按钮将图片转为base64格式保存二维码，这就可以用到html2canvas的截屏效果了

第一步 安装

Install NPM

npm install --save html2canvas

Install Yarn

yarn add html2canvas

第二步 引入页面使用

// 需求myproject.vue页面引入
import html2canvas from 'html2canvas';

// 使用
html2canvas(document.body).then(function(canvas) {
    let baseIm = canvas.toDataURL("image/jpeg")
    console.log(baseIm,"获取到的base64格式");
});

走完这两步就已经拿到截取的图片转为base64的格式，可以将拿到的base64使用在线转码工具测试。

html2canvas的配置

我们当然不满足最基本的使用，html2canvas还有一些配置项，可以更好地满足使用者

比如我这次还有个技术要求，要求转化的base64图片大小不能超过100k，这时候就可以进行配置啦

官网配置项： Options - html2canvas (hertzen.com)

以下为我项目中所使用到的

<template>
    <div class="invite_cls" ref="imageDom" id="imageDomId">
        // 容器中所有的都会被保存
    </div>
    <p class="btn_img" @click="saveQRImg">
        <span class="btn_text">保存二维码图片</span>
    </p>
</template>
<script>
import html2canvas from "html2canvas";// 引入
export default {
    data(){
        return{
        }
    },
    methods:{
        saveQRImg(){    // 保存二维码图片
            // 获取要生成图片的 DOM 元素
            let canvasDom = this.$refs.imageDom
            // 获取指定的宽高。我这里因为有border，所以再+10px，大小可以自己调整
            const width = canvasDom.clientWidth+10
            const height = canvasDom.clientHeight+10
             
            const options = {
                logging:true,  // 启用日志，我也不知道怎么看/(ㄒoㄒ)/~~就放着吧
                scale: 1.5,  // 图片渲染的比例，可以用它来调大小
                width: width,  // 保存的图片的宽
                height:height,  // 保存的图片的高
            }
            html2canvas(canvasDom, options).then(function(canvas) {
                let baseIm = canvas.toDataURL("image/jpeg")// jpeg格式，也可以保存成png格式
                console.log(baseIm,"base64-Image");
            }).catch(function(error){
                console.log(error,'转码失败')
            });
        },
    }
}
</script>

toDataURL()方法 第一个参数为保存的图片类型，第二个参数为保存的图片的精度 不传则为默认