【学习随记】poster 2

<template>
    <div class="poster" id="poster">

        <!-- loading -->
        <div class="loadingWrap" v-if="loadingState">
            <div class="loadingArea">
                <img src="../assets/imgs/loading.gif" alt="loading">
            </div>
        </div>

        <!-- 页面 html -->
        <div class="bgWrap"></div>
        
        <!-- canvas 绘制好的海报图片 在页面显示 -->
        <img class="showPoster" id="posterBox">
        
    </div>    
</template>
<script>

import logo_bank_01 from '../assets/imgs/street/logo_bank_01.png';
import logo_bank_02 from '../assets/imgs/street/logo_bank_02.png';
import logo_txt from '../assets/imgs/street/logo_txt.png';
import poster_bg from '../assets/imgs/street/poster_bg.jpg';
import poster_head from '../assets/imgs/street/h03.png';
import poster_qr from '../assets/imgs/street/poster_qr.png';
import test_qr from '../assets/imgs/street/test_qr.png';
import poster_qr_txt from '../assets/imgs/street/poster_qr_txt.png';
import poster_title from '../assets/imgs/street/poster_title.png';

export default {
    data(){
        return {
            loadingState: false,    // loading 状态
            
            poster_bg: poster_bg,   // 大背景
            imgList: [
                [ logo_bank_01, 66, 53, 280, 46 ],   // 左上角 logo
                [ logo_txt, 1350, 57, 200, 20 ], // 右上角 logo txt
                [ logo_bank_02, 750, 700, 124, 24 ], // 底部中间 
                [ test_qr, 40, 577, 129, 129 ],  // 二维码 图片
                [ poster_qr_txt, 186, 618, 170, 88 ],    // 二维码 侧边文字
                [ poster_title, 576, 135, 494, 238 ],    // 标题图片
                [ poster_head, 644, 366, 62, 62 ]   // 绘制 头像
            ],

            nickname: 'AlanZuo',
            lankmark: "大梅沙",
            conpouNum: "A1B2C3D4F5G",

        }
    },
    methods: {
        // nickName 
        clibName(nickname){
            console.log("nickname.length: ", nickname.length)
            if (nickname.length >= 9){
                nickname = nickname.substr(0,10) + "...";
                return nickname;
            }else{
                return nickname;
            }
        },
        
        
        // 生成海报
        Poster(){
            console.log("原生js canvas 开始画海报 satrt");
            let that = this;
            that.loadingState = true;   // loading 开启

            let c = document.createElement('canvas');
            let width = 1624;
            let height = 750;
            c.width = width;
            c.height = height;
            const ctx = c.getContext("2d");

            // 填充背景色
            ctx.fillStyle = "pink";
            ctx.fillRect(0, 0, width, height);

            // 绘制 大背景
            let bg = new Image();
            bg.src = that.poster_bg;  // 背景图片
            // bg.setAttribute("crossOrigin", "anonymous");
            bg.onload = ()=>{
                ctx.drawImage(bg, 0, 0, c.width, c.height);
				
				//let test = new Image();
                //test.src = that.logo_share;
                //test.onload = ()=>{
                    //ctx.drawImage(test, 0, 88, 201, 21, 50,100,402,42)
                //}

                that.lineRoundRect(ctx, 36, 573, 137, 137, 3, 4, '#d381bc'); // 绘制 二维码圆角边框矩形
                
                that.lineRoundRect(ctx, 642, 364, 66, 66, 33, 2, '#fa55dc'); // 绘制 头像圆形边框
                
                for(let i = 0; i < that.imgList.length; i++){
                    // console.log(that.imgList[i]);
                    that.drawElement(ctx, that.imgList[i]);
                }

                ctx.font = "24px PingFangSC";
                ctx.fillStyle = "#f07dda";
                ctx.fillText("爱心发件人：" + that.nickname, 713, 448); // 绘制 昵称
                // ctx.font = "24px PingFangSC";
                // ctx.fillStyle = "#f07dda";
                ctx.fillText("爱心接收地：" + that.lankmark, 713, 486); // 绘制 地标

                // 绘制 券号码
                let cell_x_num = 1125;   // 首个格子x轴位置
                for(let i = 1; i <= 11; i++ ){
                    that.fillRoundRect(ctx, cell_x_num, 100, 34, 33, 0, '#fff', 1, '#bf74aa');
                    // console.log("that.conpouNum[i]", that.conpouNum[i-1])
                    ctx.font = "24px PingFangSC";
                    ctx.fillStyle = "#f07dda";
                    ctx.fillText(that.conpouNum[i-1], cell_x_num + 9, 125);  // 券号遍历从下标0开始；每个数字之间的距离比格子之间的距离增加 9px
                    cell_x_num += 39;    // 每个格子在x轴上 距离是 39px
                }

            }
            
            setTimeout(()=>{ // 延迟1s设置img地址，防止canvas未完成绘制，页面空白或图片不完整
                that.loadingState = false; // loading 关闭
                posterBox.src = c.toDataURL(); // 设置页面图片地址
            }, 1000);
            that.setImgSize(); // 设置图片的宽高
            console.log("原生js canvas 开始画海报 end");
        },



        // 设置 旋转rotate(90deg)之后图片img标签的宽高
        setImgSize(){
            let width = document.documentElement.clientWidth,
                height = document.documentElement.clientHeight,
                img = document.getElementById("posterBox");
                img.style.width = height + 'px';
                // img.style.height = width + 'px';
                console.log("width: ", width, ' <<>> height: ', height);
        },


        /** 绘制 图片元素
        * @param ctx: canvas对象
        * @param arrList: 图片信息arr
        * @param arrList[0]：img 绘制的图片
        * @param arrList[1]: x x轴坐标
        * @param arrList[2]: y y轴坐标
        * @param arrList[3]: w 宽度
        * @param arrList[4]: h 高度
        **/
        drawElement(ctx, arrList){
            let el = new Image();
            el.src = arrList[0];
            el.onload = ()=>{
                ctx.save();
                ctx.drawImage(el, arrList[1], arrList[2], arrList[3], arrList[4]);
                ctx.restore();
            }
        },
 
        /**绘制--不填充--颜色的圆角矩形（带边框）
        * @param ctx: canvas对象
        * @param x: x轴坐标
        * @param y: y轴坐标
        * @param w: 宽度
        * @param h: 高度
        * @param round: 圆角半径
        * @param lineWidth: 线条宽度
        * @param lineColor: 线条颜色
        **/
        lineRoundRect(ctx, x, y, w, h, round, lineWidth, lineColor) {
            //圆的直径必然要小于矩形的宽高
            if (2 * round > w || 2 * round > h) { return false; }
            ctx.save();
            ctx.translate(x, y);
            //绘制圆角矩形的各个边
            this.drawRoundLine(ctx, w, h, round);
            ctx.lineWidth = lineWidth || 2; // 默认：2px
            ctx.strokeStyle = lineColor || "#000";  // 线条颜色 默认：黑色
            ctx.stroke();
            ctx.restore();
        },

        /**绘制--填充--颜色的圆角矩形（带边框）
        * @param ctx: canvas对象
        * @param x: x轴坐标
        * @param y: y轴坐标
        * @param w: 宽度
        * @param h: 高度
        * @param round: 圆角半径
        * @param innerColor: 填充颜色
        * @param lineWidth: 线条宽度
        * @param lineColor: 线条颜色
        **/
        fillRoundRect(ctx, x, y, w, h, round, innerColor, lineWidth, lineColor) {
            //圆的直径必然要小于矩形的宽高
            if (2 * round > w || 2 * round > h) { return false; }

            ctx.save();
            ctx.translate(x, y);
            //绘制圆角矩形的各个边
            this.drawRoundLine(ctx, w, h, round);
            ctx.fillStyle = innerColor || "#000"; //填充颜色 默认值：黑色
            ctx.fill();

            ctx.lineWidth = lineWidth || 2; // 默认：2px
            ctx.strokeStyle = lineColor || "#000";  // 线条颜色 默认：黑色
            ctx.stroke();

            ctx.restore();
        },

        // 绘制圆角矩形各边线
        drawRoundLine(ctx, w, h, round) {
            ctx.beginPath(0);
            // 从右下角顺时针绘制，弧度从0到1/2PI
            ctx.arc(w - round, h - round, round, 0, Math.PI / 2);
            ctx.lineTo(round, h);   // 矩形下线

            // 左下角圆弧，弧度从1/2PI到PI
            ctx.arc(round, h - round, round, Math.PI / 2, Math.PI);
            ctx.lineTo(0, round);   // 矩形左线

            // 左上角圆弧，弧度从PI到3/2PI
            ctx.arc(round, round, round, Math.PI, Math.PI * 3 / 2);
            ctx.lineTo(w - round, 0);   // 矩形上线

            // 右上角圆弧
            ctx.arc(w - round, round, round, Math.PI * 3 / 2, Math.PI * 2);
            ctx.lineTo(w, h - round);   // 矩形右线
            ctx.closePath();
        },


    },
    mounted(){
        console.log("hello  Poster");
        this.Poster();

    }
}
</script>
<style type="text/css" scoped>

.poster{
    position: relative;
    /* width: 100%; */
    /* min-height: 100vh; */
    background: pink;
}
/* 页面 */
.bgWrap{
    width: 100%;
    height: 100vh;
    background: url('../assets/imgs/poster_bg.png') no-repeat 0 center;
    background-size: 100%;
}

/* loading start */
.loadingWrap{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
}
.loadingArea{
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    background: rgba(0,0,0,.5);
    border-radius: .1rem;
    transform: translate(-50%, -50%);
}
.loadingArea img{
    width: 0.6rem;
    height: 0.6rem;
}
/* loading end */


/* 绘制好的图片，定位在最上层，铺满全屏并设置一个透明度长按保存 */
.showPoster{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    /* width: 100%;
    height: 100%;
    opacity: .01; */

    top: 50%;
    left: 50%;
    transform:  translate(-50%, -50%) rotate(90deg);
}


</style>