Vue 使用 canvas 实现生成海报图

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
image	url	图片地址（本地或网络）	见 image 小节
text	text	文本的内容	见 text 小节
rect	无	矩形	color: 颜色，支持渐变色
qrcode	content	生成二维码	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, bold	normal
textDecoration	文本修饰，支持 underline、 overline、 line-through，也可组合使用	无
textStyle	fill： 填充样式，stroke：镂空样式	fill
fontFamily	字体	sans-serif
background	文字背景颜色	无
padding	文字背景颜色边际与文字间距	0px
textAlign	文字的对齐方式，分为 left, center, right，view 的对齐方式请看 align 属性	left

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

（3）布局属性

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

属性	说明	默认
rotate	旋转，按照顺时针旋转的度数	不旋转
width、height	view 的宽度和高度，其中 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 中点，半径为最长边，目前不支持自己设置。