Vue 生成海报的插件vue-canvas-poster

1.npm安装vue-canvas-poster

npm i --save vue-canvas-poster

2.在mian.js中引入

important VueCanvasPoster from 'vue-canvas-poster'
Vue.use(VueCanvasPoster)

3.在需要的页面中使用

   <vue-canvas-poster
      :widthPixels="1000"
      :painting="painting"
      @success="canvasSuccess"
      @fail="canvasFail"
    ></vue-canvas-poster>
 data() {
    return {
      //分享海报的数据
      painting: {
        width: "320px",
        height: "520px",
        borderRadius: "10px",
        background: require("../../../public/img/hb.jpg"),
        views: [
          {
            type: "image",
            url: "",
            css: {
              top: "10px",
              left: "132px",
              width: "60px",
              height: "50px",
            },
          },
          {
            type: "text",
            text: "",
            css: {
              top: "68px",
              width: "325px",
              maxLines: 1,
              textAlign: "center",
              fontSize: "26px",
            },
          },
          {
            type: "text",
            text:"",
            css: {
              top: "155px",
              left: "47px",
              width: "225px",
              maxLines: 1,
              textAlign: "center",
              fontSize: "14px",
              maxLines: "2",
              lineHeight: "20px",
            },
          },
          {
            type: "image",
            url:"",
            css: {
              top: "210px",
              left: "50px",
              width: "220px",
              height: "190px",
            },
          },
          {
            type: "qrcode",
            content:"",
            css: {
              bottom: "31px",
              left: "36px",
              color: "#000",
              background: "#fff",
              width: "60px",
              height: "60px",
              borderWidth: "5px",
              borderColor: "#fff",
            },
          },
        ],
      },
  posterImg: "", //生成的海报图片路径
  },
}
 methods: {
    // 成功生成海报
    canvasSuccess(src) {
      this.posterImg = src; //生成是base64格式的图片
    },

    // 无法生成海报
    canvasFail(err) {
      alert(err);
    },
}
handleChangeImg(){
 //海报 图片内容修改
 //商城 Logo
 //这里需要注意下图片不支持http开头,支持https，我是手动改成https开头的
        this.painting.views[0].url =
          localStorage.getItem("indexLogoUrl").slice(0, 4) +
          "s" +
          localStorage.getItem("indexLogoUrl").slice(4);
        //商城名字
        this.painting.views[1].text = localStorage.getItem("mallName");
        //商品名字
        this.painting.views[2].text = this.details.goodsName;
        //商品图片路径
        var newStr =
          this.details.goodsImgs[0].imgUrl.slice(0, 4) +
          "s" +
          this.details.goodsImgs[0].imgUrl.slice(4);
        this.painting.views[3].url = newStr;
        //商品路径
        var url = window.location.href;
        this.painting.views[4].content = url;
}