资讯专栏INFORMATION COLUMN

vue生成canvas海报图

ghnor / 3899人阅读

vue-canvas-poster

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

概述

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

具有如下特性:

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

绘制图片(圆角、旋转)

绘制矩形(圆角、旋转)

绘制二维码

生成效果

扫码体验上线效果

安装 通过 npm 安装
# 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
          },
        ]
      }
组件参数解释
字段 类型 必填 描述
width Number 画布宽度
height Number 画布高度
views Object Array(对象数组) 看下文
rect(矩形,线条) 字段
字段名 类型 默认值 描述
top Number 0 距离顶部的距离
left Number 0 距离左侧的距离
width Number 0 宽度
height Number 0 高度
background String "white" 背景颜色
radius Number 0 圆角
deg Number 0 旋转角度 (目前不能跟 radius 一起用)
text (文本) 字段
字段名 类型 默认值 描述
top Number 0 距离顶部的距离
left Number 0 距离左侧的距离
content String "" 文本内容
fontSize Number 0 文字大小
color String black 颜色
lineHeight Number 20 行高,多行起作用
breakWord Boolean false 换行
MaxLineNumber Int 2 根据宽度换行 ,需要设置 breakWord: true ,超出行隐藏显示为...
width Number 文本宽度
bolder String false 加粗
textDecoration String none underline(下划线)、line-through(贯穿线)
image (图片) 字段
字段 类型 默认值 描述
top Number 0 距离顶部的距离
left Number 0 距离左侧的距离
url String "" 图片地址,也支持本地图片如:/images/1.jpeg
width Number 0 宽度
height Number 0 高度
radius Number 0 圆角
deg Number 0 旋转角度 (目前不能跟 radius 一起用)
qrcode (二维码) 字段
字段 类型 默认值 描述
top Number 0 距离顶部的距离
left Number 0 距离左侧的距离
content String "" 链接地址
width Number 0 宽度
height Number 0 高度
background String "" 背景色
color String black 二维码颜色
事件 success

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

  methods: {
    success(src) {
      // 设置img的src
      this.src = src
    }
  }
fail

返回失败信息

 fail(err) {
      console.log("fail", err)
    } 
问题反馈

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

提 issue

关于我

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

如果对你有帮助送我一颗小星星(づ ̄3 ̄)づ╭❤~

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106411.html

相关文章

  • 手对手的教你用canvas画一个简单的海报

    摘要:啦啦啦,首先说下需求,产品想让用户在我们内,分享一张图片到微信等平台。图片中包含用户的姓名头像和带着自己信息的二维码。然后,如何生成这张海报呢首先我们老大告诉我有一个插件叫其作用就是可以将节点转化成图片,是个不错的东西。 啦啦啦,首先说下需求,产品想让用户在我们app内,分享一张图片到微信、qq等平台。图片中包含用户的姓名、头像、和带着自己信息的二维码。然后,如何生成这张海报呢~~~首...

    verano 评论0 收藏0
  • 手对手的教你用canvas画一个简单的海报

    摘要:啦啦啦,首先说下需求,产品想让用户在我们内,分享一张图片到微信等平台。图片中包含用户的姓名头像和带着自己信息的二维码。然后,如何生成这张海报呢首先我们老大告诉我有一个插件叫其作用就是可以将节点转化成图片,是个不错的东西。 啦啦啦,首先说下需求,产品想让用户在我们app内,分享一张图片到微信、qq等平台。图片中包含用户的姓名、头像、和带着自己信息的二维码。然后,如何生成这张海报呢~~~首...

    BlackHole1 评论0 收藏0
  • 手对手的教你用canvas画一个简单的海报

    摘要:啦啦啦,首先说下需求,产品想让用户在我们内,分享一张图片到微信等平台。图片中包含用户的姓名头像和带着自己信息的二维码。然后,如何生成这张海报呢首先我们老大告诉我有一个插件叫其作用就是可以将节点转化成图片,是个不错的东西。 啦啦啦,首先说下需求,产品想让用户在我们app内,分享一张图片到微信、qq等平台。图片中包含用户的姓名、头像、和带着自己信息的二维码。然后,如何生成这张海报呢~~~首...

    cyixlq 评论0 收藏0
  • [填坑手册]小程序Canvas生成海报(一)---完整流程

    摘要:海报生成示例最近智酷君在做小程序生成海报的项目中遇到一些棘手的问题,在网上查阅了各种资料,也踩扁了各种坑,智酷君希望把这些填坑经验整理一下分享出来,避免后来的兄弟重复掉坑。 showImg(https://segmentfault.com/img/bVbs5V8?w=343&h=517);海报生成示例 最近智酷君在做[小程序]canvas生成海报的项目中遇到一些棘手的问题,在网上查阅了...

    shleyZ 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<