1.通过 npm 安装

npm i vue-canvas-poster --save

2.在main.js 中引入

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

3.在组件里面使用,示例代码如下:

//template
<div>
  <div style="margin: 10px;">生成海报图</div>
  <vue-canvas-poster :widthPixels="1000" :painting="painting" @success="canvasSuccess" @fail="canvasFail"></vue-canvas-poster>
  <img style="width: 100%;height: 100%;" :src="posterImg" alt="">
</div>

//js
data () {
  return {
    posterImg: '',//生成的海报图片路径
    painting: {
      width: '550px',
      height: '876px',
      background: 'https://ddcz.oss-cn-beijing.aliyuncs.com/images/file-1587004539522R5oa.png',
      views: [{
        type: 'image',
        url: 'http://thirdwx.qlogo.cn/mmopen/vi_32/GBGlGPzr4QibX8S4Sqwd9SIW3AiaDfV1jQoFHtChpFYK8WMIiaiczoEdIWQvHegAWvxbpnBibO26gVFvoJDx9b1Smjg/132',
        css: {
          top: '20px',
          left: '36px',
          borderRadius: '40px',
          width: '80px',
          height: '80px',
        },
      }, {
        type: 'text',
        text: 'CMDCC',
        css: {
          top: '48px',
          left: '136px',
          width: '360px',
          maxLines: 1,
          fontSize: '26px',
        },
      }, {
        type: 'qrcode',
        content: 'http://thirdwx.qlogo.cn/mmopen/vi_32/GBGlGPzr4QibX8S4Sqwd9SIW3AiaDfV1jQoFHtChpFYK8WMIiaiczoEdIWQvHegAWvxbpnBibO26gVFvoJDx9b1Smjg/132',
        css: {
          bottom: '50px',
          right: '26px',
          color: '#000',
          background: '#fff',
          width: '130px',
          height: '130px',
          borderWidth: '10px',
          borderColor: '#fff'
        },
      },],
    },
  }
},
  methods: {
    /**
      * 成功生成海报
      */
    canvasSuccess(src) {
      this.posterImg = src; //生成是base64格式的图片
      console.log(src)
    },

    /**
      * 无法生成海报
      */
    canvasFail(err) {
      alert(err)
    },
  },

4.效果图如下:

5.说明:

(1)调色板属性

background: 可以是颜色值,也可以为网络图片的链接,默认为白色,支持渐变色

width: 宽度

height: 高度

borderRadius: 边框的圆角(该属性也同样适用于子 view)

views: 里面承载子 view

(2)View 属性

type内容说明自有css
imageurl图片地址(本地或网络)见 image 小节
texttext文本的内容见 text 小节
rect矩形color: 颜色,支持渐变色
qrcodecontent生成二维码background:背景颜色(默认为透明),color: 二维码颜色(默认黑色)

(2.1)image

属性名称说明默认值
width宽度auto
height高度auto
mode图片裁剪、缩放的模式aspectFill

scaleToFill:不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素。

aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来。

注:mode 属性和小程序 image 的 mode 属性功能一致,只是默认值不同。 当 width 或 height 属性为 auto 时,mode 属性将失效。(本地图片用require()引入)

(2.2)text

属性名称说明默认值
fontSize字体大小20px
color字体颜色black
maxLines最大行数不限,根据 width 来
lineHeight行高(上下两行文字baseline的距离)fontSize 大小
fontWeight字体粗细。仅支持 normal, boldnormal
textDecoration文本修饰,支持 underline、 overline、 line-through,也可组合使用
textStylefill: 填充样式,stroke:镂空样式fill
fontFamily字体sans-serif
background文字背景颜色
padding文字背景颜色边际与文字间距0px
textAlign文字的对齐方式,分为 left, center, right,view 的对齐方式请看 align 属性left

注:如果当前行数超过设置最大行数(maxLines)时,那么多余的内容将会隐藏,则后面会带上 ... 。

(3)布局属性

以上 View ,除去自己拥有的特别属性外,还有以下的通用布局属性:

属性说明默认
rotate旋转,按照顺时针旋转的度数不旋转
width、heightview 的宽度和高度,其中 image 和 text 可不设置
top、right、bottom、left如 css 中为 absolute 布局时的作用,可为 负值默认 top 和 left 为 0

(4)相对布局方法

  想要在文本后面加个图标,需要获取文本的宽度

  如:left: ['10px', '文本的ID', 比例],表示布局在距离左边(10px + 该text文本宽度 * 比例)的距离,比例默认为 1。

注:相对布局的那个 view 代码一定需要在被相对的 view 的下面。

(4.1)border 类型

属性说明默认
borderRadius边界圆角程度,如果是正方形布局,该属性为一半宽或高时,则为圆形0
borderWidth边界宽度,外边界必设值,否则无边框效果
borderColor边框颜色black

(4.2)align

       Painter 的 align 类型与 css 中的 align 有些许不同。在 Painter 中 align 表示 view 本身的对齐方式,而不像 css 中表示对其子 view 的操作。align 可以作用在 Painter 支持的所有 view 上。它以设置的 left、top、right、bottom 的位置为基准,然后做不同的对齐操作。并且 align 在文字多行情况下,会影响多行文字的对齐方式。

注:如果布局使用了 right 确定位置,则该 view 会默认右对齐布局,但此时文字还是从左边绘制。

(5)CSS3 支持

(5.1)shadow

shadow: 'h-shadow v-shadow blur color';

h-shadow: 必需。水平阴影的位置。允许负值。

v-shadow: 必需。垂直阴影的位置。允许负值。

blur: 必需。模糊的距离。

color: 必需。阴影的颜色。

       shadow 可以同时修饰 image、rect、text、qrcode 等 。在修饰 text 时则相当于 text-shadow;修饰 image 和 rect 时相当于 box-shadow;修饰 qrcode 时,则相当于二维码有效区域的投影。

(5.2)渐变色支持

linear-gradient(-135deg, blue 0%, rgba(18, 52, 86, 1) 20%, #987 80%)

radial-gradient(rgba(0, 0, 0, 0) 5%, #0ff 15%, #f0f 60%)

       你可以在画布的 background 属性或者 rect 的 color 属性中使用以下方式实现 css 3 的渐变色,其中 radial-gradient 渐变的圆心为 view 中点,半径为最长边,目前不支持自己设置。

Logo

前往低代码交流专区

更多推荐