保存整个屏幕页面

<template>
    <view class="share">

        <view id="poster" class="poster">
    
        </view>
        <view class="btn" @click="renderScript.exportPhoto">
            保存到本地
        </view>
    </view>
</template>

<script>
    import {
        pathToBase64,
        base64ToPath
    } from 'image-tools'
    import {
        productdetailApi
    } from "@/api/api.js"
    export default {
        data() {
            return {
                info: {}
            }
        },
        onLoad(opt) {
            this.getInfo((opt.id))
        },
        methods: {
            getInfo(id) {
                productdetailApi({
                    id
                }).then(res => {
                    this.info = res.data.data
                })
            },
            back() {
                let backPage = getCurrentPages()
                if (backPage.length == 1) {
                    uni.navigateTo({
                        url: "/pages/index/index"
                    })
                } else {
                    uni.navigateBack()
                }
            },
            //通过下面的方法将html转换为图片base64数据回调给此处
            receiveRenderData(data) {
                let that = this;
                base64ToPath(data, '.jpeg').then(function(imgPath) {
                    // console.log(imgPath)
                    //保存到手机相册,
                    // #ifdef H5
                    uni.downloadFile({
                        url: imgPath,
                        success: (res) => {
                            //创建一个a标签
                            var link = document.createElement('a');
                            //把a标签的href属性赋值到生成好了的url
                            link.href = imgPath;

                            //通过a标签的download属性修改下载图片的名字
                            link.download = '分享海报.png';
                            // link.download = imgPath.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0];
                            //让a标签的click函数，直接下载图片
                            link.click();
                            uni.hideLoading()
                        }
                    })
                    // #endif
                    // #ifndef H5
                    uni.saveImageToPhotosAlbum({
                        filePath: imgPath,
                        success: function() {
                            that.$u.toast("成功");
                            uni.hideLoading()
                        },
                        fail: err => {
                            console.log(`错误信息:`, err);
                            that.$u.toast(that.$t('失败'));
                        }
                    });
                    // #endif

                })
            },
            openLoading() {
                uni.showLoading({
                    title: "海报生成中"
                })
            }

        }

    }
</script>
<!-- 不要忘记声明module属性,view中需要通过module声明的调用里面的方法  -->
<script module="renderScript" lang="renderjs">
    import html2canvas from 'html2canvas';
    import {
        pathToBase64,
        base64ToPath
    } from 'image-tools'
    export default {
        methods: {
            exportPhoto(e, ownerVm) {
                //下面的代码可能会比较耗时,给个加载动画
                console.log("1111111")
                ownerVm.callMethod('openLoading')
                var dom = document.querySelector('#poster'); // 获取dom元素
                html2canvas(dom, {
                    width: dom.clientWidth, //dom 原始宽度
                    height: dom.clientHeight,
                    scrollY: 0,
                    scrollX: 0,
                    useCORS: true, //支持跨域，但好像没什么用
                }).then((canvas) => {
                    // 将生产的canvas转为base64
                    var base64 = canvas.toDataURL('image/png')
                    // 将数据回调给第一个script
                    ownerVm.callMethod('receiveRenderData', base64)
                }).catch((e) => {
                    console.log(e);
                });
            }
        }
    }
</script>
<style lang="scss" scoped>

</style>