【学习随记】poster

<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>
        
        <!-- 生成按钮 -->
        <!-- <p class="createBtn" @click="Poster()">生成</p> -->

        <!-- 页面显示 绘制好的海报图片 -->
        <img class="showPoster" id="posterBox">
        

    </div>    
</template>
<script>

import poster_mx from '../assets/imgs/mx.jpg';
import logo from '../assets/imgs/logo.png';
import qr from '../assets/imgs/sun_qr_01.jpg';

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_bg_num from '../assets/imgs/street/poster_bg_num.png';
// import poster_head from '../assets/imgs/street/poster_head.png';
import poster_head from '../assets/imgs/street/h03.png';
import poster_qr from '../assets/imgs/street/poster_qr.png';
import poster_qr_n 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_mx: poster_mx,
            logo: logo,
            qr: qr,

            // 图片
            logo_bank_01: logo_bank_01,
            logo_bank_02: logo_bank_02,
            logo_txt: logo_txt,
            poster_bg: poster_bg,
            poster_bg_num: poster_bg_num,
            poster_head: poster_head,
            poster_qr: poster_qr,
            poster_qr_n: poster_qr_n,
            poster_qr_txt: poster_qr_txt,
            poster_title: poster_title,

            // imgList:  [ 
            //     logo_bank_01,
            //     logo_bank_02,
            //     logo_txt,
            //     poster_bg,
            //     poster_bg_num,
            //     poster_head,
            //     poster_qr,
            //     poster_qr_txt,
            //     poster_title
            // ],

            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, 1624, 750);

            // 绘制 大背景
            let bg = new Image();
            bg.src = that.poster_bg;  // 背景图片
            // bg.setAttribute("crossOrigin", "anonymous");
            bg.onload = ()=>{
                ctx.drawImage(bg, 0, 0, c.width, c.height);

                that.drawElement(ctx, that.logo_bank_01, 66, 53, 280, 46);  // 左上角 logo
                that.drawElement(ctx, that.logo_txt, 1350, 57, 200, 20);    // 右上角 logo txt
                that.drawElement(ctx, that.logo_bank_02, 750, 700, 124, 24);    // 底部中间 logo

                // 二维码 图片  内点颜色 #8f160d  124px + 2px白边 + 2px白边
                that.drawElement(ctx, that.poster_qr_n, 40, 577, 129, 129);

                // 绘制一个圆角矩形
                that.lineRoundRect(ctx, 36, 573, 137, 137, 3, 4, '#d381bc');

                // 测试 绘制一个填充色，带边框的矩形
                // that.fillRoundRect(ctx, 36, 373, 137, 137, 10, 'lime', 5, '#d381bc');

                that.drawElement(ctx, that.poster_qr_txt, 186, 618, 170, 88); // 二维码 侧边文字
                that.drawElement(ctx, that.poster_title, 576, 135, 494, 238); // 标题图片

                // 绘制 头像
                let poster_head = new Image();
                poster_head.src = that.poster_head;  // logo图片地址
                poster_head.onload = ()=>{
                    let qrX = 642;  // x轴位置
                    let qrY = 364;  // y轴位置
                    let qrW = 62;   // 头像宽高
                    ctx.save();
                    ctx.beginPath();
                    ctx.arc(qrX + qrW / 2, qrY + qrW / 2, qrW / 2, 0, Math.PI * 2, false);
                    ctx.closePath();
                    ctx.lineWidth = 2; // 边框线宽度
                    ctx.strokeStyle = "#fe6ae6";    // 边框线颜色
                    ctx.stroke();
                    ctx.drawImage(poster_head, qrX, qrY, qrW, qrW);
                    ctx.clip();
                    ctx.restore();
                }

                // 绘制 文案 昵称
                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
                }


                // // 画 头像
                // let head = new Image();
                // // head.setAttribute("crossOrigin", "anonymous");   // 设置网络图片跨域的问题, 如果图片有跨域要设置，需要关注一下是在设置src前或者是之后设置，之前碰到这点有问题，忘了
                // head.src = that.logo;  // logo图片地址
                // // head.setAttribute("crossOrigin", "anonymous");
                // head.onload = ()=>{
                //     ctx.save();
                //     let qrX = 30;
                //     let qrY = 1001;
                //     let qrW = 80;
                //     // ctx.beginPath();
                //     ctx.arc(qrX + qrW / 2, qrY + qrW / 2, qrW / 2, 0, Math.PI * 2, false);
                //     // ctx.strokeStyle = "lime";
                //     // ctx.lineWidth = 1;
                //     // ctx.stroke();
                //     // ctx.closePath();
                //     ctx.clip();
                //     ctx.drawImage(head, 30, 1001, 80, 80);
                //     ctx.restore();
                // }

                // // 画 昵称
                // ctx.font = "24px PingFangSC";
                // ctx.fillStyle = "#4a4a4a";
                // ctx.fillText("Haleays", 127, 1030);  // nickName

                // // 画 文案1
                // ctx.font = "28px PingFangSC";
                // ctx.fillText('一起来学画海报', 127, 1075);

                // // 画 文案2
                // ctx.font = "28px PingFangSC";
                // ctx.fillText('你学会了吗哈哈', 525, 1114);

                // // 画 文案3
                // ctx.font = "28px PingFangSC";
                // ctx.fillText('要多学习', 568, 1154);

                // // 画 QRcode
                // let QRcode = new Image();
                // QRcode.src = that.qr; // QRcode 地址
                // // QRcode.setAttribute("crossOrigin",'Anonymous')
                // QRcode.onload = ()=>{
                //     ctx.save();
                //     let qrX = 550;
                //     let qrY = 924;
                //     let qrW = 142;
                //     ctx.beginPath();
                //     ctx.arc(qrX + qrW / 2, qrY + qrW / 2, qrW / 2, 0, Math.PI * 2, false);
                //     ctx.strokeStyle = "#D8D8D8";
                //     ctx.lineWidth = 1;
                //     ctx.stroke();
                //     ctx.closePath();
                //     ctx.clip();
                //     ctx.drawImage(QRcode, 550, 924, 142, 142);
                //     ctx.restore();
                // }

            }
            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 img: 绘制的图片
        * @param x: x轴坐标
        * @param y: y轴坐标
        * @param w: 宽度
        * @param h: 高度
        **/
        drawElement(ctx, img, x, y, w, h){
            let el = new Image();
            el.src = img;
            el.onload = ()=>{
                ctx.save();
                ctx.drawImage(el, x, y, w, h);
                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();
        },



        // 横屏
        detectOrient() {
            let width = document.documentElement.clientWidth,
                height = document.documentElement.clientHeight,
                wrapper = document.getElementById("poster"),
                style = "";
                // console.log('el>>', width, height)
                // console.log(wrapper)
            if(width >= height) { // 竖屏
                style += "width:100%";
                style += "height:100%;";
                style += "-webkit-transform: rotate(0); transform: rotate(0);";
                style += "-webkit-transform-origin: 0 0;";
                style += "transform-origin: 0 0;";
            } else { // 横屏
                style += "width:" + height + "px;";// 注意旋转后的宽高切换
                style += "height:" + width + "px;";
                style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
                // 注意旋转中点的处理
                style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
                style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
            }
            wrapper.style.cssText = style;
            console.log("detectOrient", width, height);
        },


        // show img list
        showImgList(){
            let list = this.imgList;
            for(let i = 0;i < list.length; i++){
                console.log(list[i]);
            }
        },


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

        // this.showImgList();

        // let c = this.clibName(this.nickname);
        // console.log(c);

        this.Poster();



        // let num = "A1B2C3D4F5G";
        // console.log("num.length", num.length);
        // for(let i = 0;i < num.length; i++){
        //     console.log('item num:', i + '--' + num[i])
        // }

    }
}
</script>

<style type="text/css" scoped>


.poster{
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: pink;
}
.createBtn{
    position: absolute;
    top: .1rem;
    left: .3rem;
    width: 6.9rem;
    height: .8rem;
    line-height: .8rem;
    text-align: center;
    background: #f5f5f5;
}

/* 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: 50%;
    left: 50%;
    /* width: 90%; */
    transform:  translate(-50%, -50%) rotate(90deg);
}



</style>