每日一练25：vue的vue-canvas-poster生成海报

本文参考：vue- canvas生成海报图

看下效果：点击分享海报后弹出海报，点击X按钮和空白处海报消失的效果

安装：

yarn add vue-canvas-poster 

全局

import CanvasPoster from 'vue-canvas-poster' 

Vue.use(CanvasPoster)

局部

import {vueCanvasPoster} from 'vue-canvas-poster'

components: {

vueCanvasPoster

},

 

index.vue

 <div @click="showExtension">分享海报</div>
<!--这个为弹框黑色半透明背景-->
<div @click="hidePosters" :class="{hidePoster:showPoster}"></div>
<!--这个为弹出的海报组件 第一种方式-->
<invite-poster v-show="showPoster" @hideposter="hidePosters"></invite-poster>
<!--这个为弹出的海报组件 第二种方式-->
<!--<invite-poster v-show="showPoster" @hideposter="hidePosters"></invite-poster>-->


.hidePoster {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998;
  background: rgba(0, 0, 0, 0.6);
}

script

import InvitePoster from "../../container/invite-poster";

export default {
 data() {
    return {
      showPoster: false,
      hidePoster: false,
    };
  },
  components: {
    InvitePoster,
  },
methods: {
    showExtension() {
      this.showPoster = true;
      return;
    },
    hidePosters() {
      this.showPoster = false;
      return;
    }
  },
}

invite-poster.vue 

<template>
  <div class="talent_poster">
    <div class="content_container">
      <vue-canvas-poster
        :widthPixels="1000"
        :painting="painting"
        @success="success"
        @fail="fail"
      ></vue-canvas-poster>
      <img :src="posterImg" />
       <!--第一种方式-->
      <p @click="$emit('hideposter')"><span>X</span></p>
      <!--第二种方式-->
      <!--<p @click="$listeners.hideposter"><span>X</span></p>-->
    </div>
  </div>
</template>
<script>
export default {
  middleware: "",
  props: {},
  components: {},
  data() {
    return {
      showPoster: true,
      posterImg: "", //生成的海报
      painting: {
        width: "550px",
        height: "876px",
        background: require("../assets/image/file-1587004539522R5oa.png"),
        views: [
          {
            type: "image",
            url: 'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIxbEZu0fBQOYlTLTpqtoezkNiaCBQ4ZXZAKhvPiaFAdI91vBsUkpiaDH4mp4qGvcVo2EaxRrp5fMia8w/132',
            css: {
              top: "20px",
              left: "36px",
              borderRadius: "40px",
              width: "80px",
              height: "80px",
            },
          },
          {
            type: "text",
            text: "故事以外",
            css: {
              top: "48px",
              left: "136px",
              width: "360px",
              maxLines: 1,
              fontSize: "26px",
            },
          },
          {
            type: "qrcode",
            content: "你好，我是小愛同學",
            css: {
              bottom: "153px",
              left: "32px",
              color: "#000",
              background: "#fff",
              width: "100px",
              height: "100px",
              borderWidth: "10px",
              borderColor: "#fff",
            },
          },
        ],
      },
    };
  },
  created() {},
  methods: {
    success(src) {
      this.posterImg = src;
    },
    fail(err) {
      alert(err);
    },
  },
};
</script>
<style lang="less">
.talent_poster {
  width: 100%;
  .content_container {
    position: absolute;
    width: 80%;
    top: 50%;
    left: 50%;
    overflow: hidden;
    z-index: 999;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
      margin-bottom: 10px;
    }
    p {
      text-align: center;
      span {
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.7);
        width: 30px;
        color: rgba(255, 255, 255, 0.7);
        text-align: center;
        line-height: 28px;
        height: 30px;
        display: inline-block;
      }
    }
  }
}
</style>

file-1587004539522R5oa.png这个图片是https://ddcz.oss-cn-beijing.aliyuncs.com/images/file-1587004539522R5oa.png

好了，搞定