在微信小程序中截屏

碰到了产品经理的需求，在小程序中需要点击按钮截取一张单据的图片，找了很多资料都是从小程序端跳到h5页面在h5页面进行截图。

我这里是用uniapp写的，具体操作如下：

<button @click='goH5'>跳到h5页面</button>

这个时候我们可能会带一些参数，我是在路由跳转的时候将参数带到路径后面

goH5(){
    uni.redirectTo({
        url:`/web?&a=${1}&b=${2}`
})
}

这里我多写了一层，点击按钮会跳到另一个vue文件里面，这个h5页面在这个单独的vue文件中，

当然也可以不单独创建一个vue文件，我这里写多一层是为了在项目文件目录中更清晰一些。

<template>
    <view>
        <web-view :src='hUrl'>
    </view>
</template>

web-view 就是我们的html页面。

小程序还没有上线时，我们用来测试，这时hUrl是html的本地路径，我这里是用vsCode的live serve打开的。

接收参数是在onLoad时获取到传来的参数。

onLoad(options){
    console.log(options)        //{a:1,b:2}
    this.a = options.a
    this.b = options.b
}

然后在mounted中

mounted(){
    this.hUrl = `http://127.0.0.1:5000/web.html?&a=${this.a}&b=${this.b}`
}

这样，在打开这个vue文件的时候，就会自动打开h5页面并携带上你的参数。

随后，在h5页面我们需要使用先获取h5页面的路径，然后使用querystring.parse()解析路径，获取到我们需要的参数。

let url = window.location.href
let obj = querystring.parse(url)

console.log(obj)    //{a:1,b:2}

页面布置完之后，我们需要使用dom-to-image这个插件进行截图。

let dom = document.querySelector('#dom')
domtoimage.toJpeg(dom, {bgcolor: "#ffffff",quality: 1}).then(res=>{
                    console.log(res)      //把res复制到浏览器上就可以看到自己的截图  
                })

在微信小程序中截屏

悦读