<template>
    <view>
      <view class="invitation" @longpress="logoTime" v-if="long">
           长摁保存 cv 改改参数即可使用
        </view>

            <canvas canvas-id="myCanvas" id="myCanvas" :style="{width:canvasWidth, height: canvasHeight, position: fixed}"></canvas>
 
      
    </view>
</template>

<script>
    export default {
        data() {
            return {
                // 邀请码
                Invitation: null,

                // 名字
                name: 'name',
                // 二维码地址
                codeUrl: '../../../static/come .pn',

                // 画布宽高
                canvasWidth: 100 + '%',
                canvasHeight: 100 + '%',
                fixed: 'fixed',
             
                // 画布二维码对象
                qrCodeImage: {},
                //  设备信息
                deviceInformation: {},
                long: true,
                url: '../../../static/come .png',
             

            }
        },
        onLoad() {
          
        },

        methods: {
          
            // 长按 
            async logoTime() {
                this.xtc = uni.canvasPutImageData('myCanvas', this)
                // 获取设备信息
                this.deviceInformation = await this.getSystemInfo()
                this.canvasWidth = (this.deviceInformation.windowWidth)
                this.canvasHeight = (this.deviceInformation.windowHeight)
                //  获取图片信息
                this.qrCodeImage = await this.getImageInfo(this.codeUrl)
                this.qrCodeImages = await this.getImageInfo(this.url)
                if (this.deviceInformation.errMsg == "getSystemInfo:ok" && this.qrCodeImage.errMsg ==
                    "getImageInfo:ok" && this.qrCodeImages.errMsg== "getImageInfo:ok") {
                    uni.showToast({
                        icon: 'loading',
                        mask: true,
                        duration: 10000,
                        title: '海报绘制中',
                    });

                    setTimeout(() => {
                        let ctx = uni.createCanvasContext('myCanvas');
                        // 填充背景色
                        ctx.setFillStyle('#f3f3f3')
                        ctx.fillRect(0, 0, this.deviceInformation.windowWidth, 
                         //  这里有个细节  也因为用到了两张图图片  大图片要先进行渲染不然 会覆盖掉小图片
                        this.deviceInformation.windowHeight) // fillRect(x,y,宽度，高度)
                        // 绘制背景图  ctx.drawImage （图片路径， 图片距离屏幕左边宽度   ，图片距离屏幕顶部高度， 图片宽度，图片高度）
                        ctx.drawImage(this.qrCodeImages.path,  10,50, this.qrCodeImage.width*1.3, this.qrCodeImage .height*2)
                        // 绘制二维码 
                        ctx.drawImage(this.qrCodeImage.path, 250, 400, this.qrCodeImage.width/4, this.qrCodeImage .height/4)
                      
                        // 邀请码
                        ctx.setFontSize(16) // 字号
                        ctx.setFillStyle('#333') // 颜色
                        // ctx.setFontSize(12)
                        ctx.fillText('邀请码', 20, this.deviceInformation.windowHeight -350); // （文字，x，y）
                        // 邀请码，码
                        ctx.setFontSize(30) // 字号
                        ctx.setFillStyle('#FC0334') // 颜色
                        ctx.fillText(this.Invitation, 20, this.deviceInformation.windowHeight - 310); // （文字，x，y）
                        // 邀请人
                        ctx.setFontSize(12) // 字号
                        ctx.setFillStyle('#333') // 颜色
                        ctx.fillText('用户' + this.name + '邀请您加入', 20,   
                        this.deviceInformation.windowHeight - 286.5); // （文字，x，y）      
                        ctx.setFontSize(11) // 字号
                        ctx.setFillStyle('#999') // 颜色
                        ctx.fillText("扫码入", 245, this.deviceInformation.windowHeight - 288); // （文字，x，y）       
                        ctx.draw(true, (rest) => { // draw方法 把以上内容画到 canvas 中。
                            if (rest.errMsg == 'drawCanvas:ok') {
                                this.long = false
                            }
                            console.log(rest, '走到了这里')
                            uni.showToast({
                                icon: 'success',
                                mask: true,
                                title: '绘制完成',
                            });
                            // 这里因为我们项目是需要 全屏保存的  所以  x y  的参数都是0
                            uni.canvasToTempFilePath({ // 保存canvas为图片  uni 官方api文档
                                x: 0,  
                                y: 0,
                                fileType: 'jpg',
                                width: this.deviceInformation.windowWidth, 
                                height: this.deviceInformation.windowHeight,
                                destWidth: this.deviceInformation.windowWidth, //  如果保存到手机比较模糊 改这里 一般*2 即可解决
                                destHeight: this.deviceInformation.windowHeight,
//  如果保存到手机比较模糊 改这里 一般*2 即可解决
                                canvasId: 'myCanvas',
                                quality: 1,
                                success: (res) => {
                                    // 在H5平台下，tempFilePath 为 base64
                                    console.log(res, '回调成功')
                                    this.conserve(res.tempFilePath)
                                    console.log(res.tempFilePath, '//要保存的文件路径')
                                },

                            })
                        });
                    }, 1500)
                } else {
                    console.log('err')
                    // } else {
                    //     console.log('err')
                }
            },

            // 获取图片信息
            getImageInfo(image) {
                return new Promise((rq, rj) => {
                    uni.getImageInfo({
                        src: image,
                        success: function(res) {
                            console.log(res, '图片')
                            req(res)
                        },
                    });
                })
            },
            // 获取设备信息 

            getSystemInfo() {
                return new Promise((rq, rj) => {
                    uni.getSystemInfo({
                        success: function(res) {
                            req(res)
                        }
                    });
                })
            },
            //  保存到手机
            conserve(ip) {
                uni.saveImageToPhotosAlbum({
                    filePath: ip, //返回的临时路径
                    success: function(
                        res2) {
                        console.log( res2,   '临时'   )
                        uni.showToast({
                            title: "保存成功",
                            icon: "none"
                        });
                    },
                    fail: function() {
                        uni.showToast({
                            title: "保存失败，请稍后重试",
                            icon: "none"
                        });
                    }
                });
            }


        }
    }
</script>

<style lang="scss">

</style>