Vue移动端h5使用canvas生成海报带有分享码

<template>
  <div class="codeShare-wrap">
    <TitleBar title="海报推广">TitleBar>
    <span>请长按图片保存span>
    <div class="code-box" ref="canvasBox">
      <canvas id="poster-canvas">canvas>
      <img v-if="showPoster" :src="posterMerge" alt="海报" />
      <img v-else :src="shareCodeUrl" alt="分享码" class="code" />
    div>
    <div class="submit-btn" @click="changePoster">切换海报div>
  div>
template>

<script lang="ts">
  import TitleBar from "../../../components/titleBar/TitleBar.vue";
  import { Component, Prop, Vue } from "vue-property-decorator";
  import { PosterCanvasParams } from "./data";
  import { showLoading, hideLoading } from "../../../utils/utils";

  @Component({
    components: {
      TitleBar
    }
  })
  export default class CodeShare extends Vue {
    readonly $axios: any;
    poster1Params: PosterCanvasParams = {
      codeImageShrinkScale: 2.6,
      codePositionTopScale: 1.98,
      codeIsHorizontalCenter: true,
      codeIsVerticallyCenter: false
    };
    poster2Params: PosterCanvasParams = {
      codeImageShrinkScale: 5.7,
      codePositionTopScale: 1.31,
      codeIsHorizontalCenter: true,
      codeIsVerticallyCenter: false
    };
    currentPosterIndex: number = 0;
    posterTotal: number = 2;
    shareCodeUrl: string = "";
    posterMerge: string = "";
    showPoster: boolean = false;
    
    async mounted() {
      await this.getshareCodeUrl();
      this.initPosterCanvas(this.poster1Params);
    }

    async getshareCodeUrl() {
      const res = await this.$axios.get("member/my/h5/qrcode");
      this.shareCodeUrl = res.name;
    }

    initPosterCanvas(params: PosterCanvasParams) {
      showLoading("生成海报中...");
      const canvas: any = document.getElementById("poster-canvas");
      const canvasBox: any = this.$refs.canvasBox;
      const context = canvas.getContext("2d");
      const ratio = this.getPixelRatio(context);
      canvas.width = canvasBox.clientWidth * ratio;
      canvas.height = canvasBox.clientHeight * ratio;
      const posterImg = new Image();
      const codeImg = new Image();
      posterImg.src = require(`../../../assets/share/poster${this
        .currentPosterIndex + 1}.png`);
      posterImg.crossOrigin = "Anonymous";
      posterImg.onload = () => {
        context.drawImage(posterImg, 0, 0, canvas.width, canvas.height);
        codeImg.src =
          process.env.NODE_ENV === "production"
            ? this.shareCodeUrl
            : require("../../../assets/share/code.jpg");
        codeImg.crossOrigin = "Anonymous";
        const codeImgWidthAndHeight =
          canvas.width / params.codeImageShrinkScale;
        const positionLeft = params.codeIsHorizontalCenter
          ? canvas.width / 2 - codeImgWidthAndHeight / 2
          : canvas.width / params.codePositionLeftScale;
        const positionTop = params.codeIsVerticallyCenter
          ? canvas.height / 2 - codeImgWidthAndHeight / 2
          : canvas.height / params.codePositionTopScale;
        codeImg.onload = () => {
          context.drawImage(
            codeImg,
            positionLeft,
            positionTop,
            codeImgWidthAndHeight,
            codeImgWidthAndHeight
          );
          this.posterMerge = canvas.toDataURL("image/png");
          this.showPoster = true;
          hideLoading();
        };
      };
    }

    getPixelRatio(context) {
      const backingStore =
        context.backingStorePixelRatio ||
        context.webkitBackingStorePixelRatio ||
        context.mozBackingStorePixelRatio ||
        context.msBackingStorePixelRatio ||
        context.oBackingStorePixelRatio ||
        context.backingStorePixelRatio ||
        1;
      return (window.devicePixelRatio || 1) / backingStore;
    }

    changePoster() {
      this.currentPosterIndex++;
      if (this.currentPosterIndex >= this.posterTotal) {
        this.currentPosterIndex = 0;
      }
      this.initPosterCanvas(this[`poster${this.currentPosterIndex + 1}Params`]);
    }
  }
</script>

<style lang="less" scoped>
  @import "codeShare.less";
</style>

效果图

我的掘金地址：https://juejin.im/post/5e01c669e51d4557f5450b44