vue生成canvas海报图

vue 组件-简单属性画 Canvas 图
github

一个通过 css 属性画 canvas 图片的轻量级的 vue 组件
(A lightweight vue components use canvas draw image by css properties.)

具有如下特性：

绘制文本(换行、超出内容省略号、中划线、下划线、文本加粗)

绘制图片(圆角、旋转)

绘制矩形(圆角、旋转)

绘制二维码

</>复制代码 
# npm
npm i vue-canvas-poster --save

template

</>复制代码 

</>复制代码 
import vueCanvasPoster from "vue-canvas-poster"
components: {
  vueCanvasPoster
}
// or Global Install
import Vue from "vue"
import vueCanvasPoster from "vue-canvas-poster"
Vue.use(vueCanvasPoster)

</>复制代码 
     {
        width: 550,
        height: 876,
        views: [
          {
            type: "rect",
            top: 0,
            left: 0,
            background: "#f4f5f7",
            width: 550,
            height: 876
          },
          {
            type: "image",
            url: "https://avatars0.githubusercontent.com/u/35954879?s=460&v=4",
            left: 36,
            top: 20,
            width: 80,
            height: 80,
            radius: 40
          },
          {
            type: "text",
            content: "乖摸摸头的小店",
            fontSize: 26,
            bolder: true,
            top: 48,
            left: 136,
            width: 360,
            breakWord: true,
            MaxLineNumber: 1,
          },
          {
            type: "rect",
            top: 120,
            left: 12,
            background: "#FFFFFF",
            width: 526,
            height: 540,
            radius: 10
          },
          // 本地图片
          {
            type: "image",
            url: require("./assets/1.jpg"),
            left: 25,
            top: 150,
            width: 332,
            height: 332,
          },
          // 网络图片
          {
            type: "image",
            url: "https://tgoods.top1buyer.com/res/testfile/imgs/20190702180744/MR9600-Pink/2.jpg",
            left: 364,
            top: 150,
            width: 160,
            height: 160
          },
          {
            type: "image",
            url: "https://tgoods.top1buyer.com/res/testfile/imgs/20190702180744/MR9600-Pink/3.jpg",
            left: 364,
            top: 320,
            width: 160,
            height: 160
          },
          {
            type: "text",
            content: `18987、安奈儿童装上衣条纹童装上衣条纹童装上衣 条纹童装上衣`,
            color: "#666666",
            fontSize: 22,
            top: 507,
            left: 25,
            width: 450,
            lineHeight: 33,
            MaxLineNumber: 2,
            breakWord: true
          },
          {
            type: "text",
            content: `劲爆价:`,
            fontSize: 24,
            top: 608,
            left: 26,
          },
          {
            type: "text",
            content: `¥39.00`,
            color: "#E5463E",
            fontSize: 36,
            border: true,
            top: 601,
            left: 116
          },
          {
            type: "text",
            content: `¥259.00`,
            color: "#999999",
            fontSize: 26,
            border: true,
            top: 609,
            left: 243,
            textDecoration: "line-through"
          },
          {
            type: "rect",
            top: 647,
            left: 439,
            background: "#fff",
            width: 28,
            height: 28,
            deg: 45
          },
          {
            type: "text",
            content: `长按或扫描二维码`,
            fontSize: 18,
            color: "#999999",
            top: 829,
            left: 385
          },
          // 本地图片
          {
            type: "image",
            url: require("./assets/slogen.png"),
            left: 26,
            top: 821,
            width: 218,
            height: 24
          },
          {
            type: "qrcode",
            content: "https://github.com/sunnie1992/vue_canvas_poster",
            background: "#fff",
            color: "#000",
            left: 392,
            top: 690,
            width: 130,
            height: 130
          },
        ]
      }

返回生成 base64 图片的本地 url,设置 src

</>复制代码 
  methods: {
    success(src) {
      // 设置img的src
      this.src = src
    }
  }

返回失败信息

</>复制代码 
 fail(err) {
      console.log("fail", err)
    } 

有什么问题可以提 issue 或扫描微信二维码跟我联系

提 issue

您可以扫描添加下方的微信并备注 Sol 加交流群，给我提意见，交流学习。

如果对你有帮助送我一颗小星星（づ￣3￣）づ╭❤～