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

古城微笑少年丶 2022-09-10 03:30 532阅读 0赞

#### 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;
    }