<template>
    <view>
      <view class="invitation" @longpress="logoTime" v-if="long">
           長摁保存 cv 改改參數(shù)即可使用
        </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: {},
                //  設(shè)備信息
                deviceInformation: {},
                long: true,
                url: '../../../static/come .png',
             

            }
        },
        onLoad() {
          
        },

        methods: {
          
            // 長按 
            async logoTime() {
                this.xtc = uni.canvasPutImageData('myCanvas', this)
                // 獲取設(shè)備信息
                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: '海報(bào)繪制中',
                    });

                    setTimeout(() => {
                        let ctx = uni.createCanvasContext('myCanvas');
                        // 填充背景色
                        ctx.setFillStyle('#f3f3f3')
                        ctx.fillRect(0, 0, this.deviceInformation.windowWidth, 
                         //  這里有個細(xì)節(jié)  也因?yàn)橛玫搅藘蓮垐D圖片  大圖片要先進(jìn)行渲染不然 會覆蓋掉小圖片
                        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方法 把以上內(nèi)容畫到 canvas 中灵疮。
                            if (rest.errMsg == 'drawCanvas:ok') {
                                this.long = false
                            }
                            console.log(rest, '走到了這里')
                            uni.showToast({
                                icon: 'success',
                                mask: true,
                                title: '繪制完成',
                            });
                            // 這里因?yàn)槲覀冺?xiàng)目是需要 全屏保存的  所以  x y  的參數(shù)都是0
                            uni.canvasToTempFilePath({ // 保存canvas為圖片  uni 官方api文檔
                                x: 0,  
                                y: 0,
                                fileType: 'jpg',
                                width: this.deviceInformation.windowWidth, 
                                height: this.deviceInformation.windowHeight,
                                destWidth: this.deviceInformation.windowWidth, //  如果保存到手機(jī)比較模糊 改這里 一般*2 即可解決
                                destHeight: this.deviceInformation.windowHeight,
//  如果保存到手機(jī)比較模糊 改這里 一般*2 即可解決
                                canvasId: 'myCanvas',
                                quality: 1,
                                success: (res) => {
                                    // 在H5平臺下织阅，tempFilePath 為 base64
                                    console.log(res, '回調(diào)成功')
                                    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)
                        },
                    });
                })
            },
            // 獲取設(shè)備信息 

            getSystemInfo() {
                return new Promise((rq, rj) => {
                    uni.getSystemInfo({
                        success: function(res) {
                            req(res)
                        }
                    });
                })
            },
            //  保存到手機(jī)
            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>