PicTemplate

A Vue Component for html2canvas

Vue support

Supports only Vue >= 2

Installation and usage

npm install --save pic-template

<PicTemplate
  ref="boxRef"
  v-model="loading"
  :data="data"
  @error="onError"
/>

Global Import

import PicTemplate from 'pic-template'
Vue.use(PicTemplate)

Import on Demand

import PicTemplate from 'pic-template'

new Vue({
  components: {
    PicTemplate
  },
  data() {
    return {
      loading: false,
      options: {
        debug: true,
        autoRender: false
      },
      data: {
        bgImage: '',
        list: [
          {
            type: 1, // 1-text 2-image
            content: 'ABC Number CBA', // text or image url
            fontSize: 100,
            fontColor: 'white',
            x: 503,
            y: 676,
            alignment: 2, // 1-left 2-center 3-right
            style: {
              width: '120px'
            }
          }
        ]
      }
    }
  },
  methods: {
    async render() {
      const canvas = await this.$refs['boxRef'].render()
      console.log('res:', canvas)
    },
    onError(error) {
      console.log(error)
    }
  }
});

PicTemplate Props

| Attribute | Required | Type | Default | |:------| :------ | :------ | :------ | | v-model | no | boolean | false | | data | yes | object (PicTemplateData) | - | | options | no | object (PicTemplateOps) | - |

PicTemplate Events

| Event | Description | Arguments |:------| :------ | :------ | | error | error | (error: string, code: number) |

Code

| Code | Description |:------| :------ | | 101 | timeout | | 102 | setData error | | 103 | render error | | 104 | image load error |

PicTemplate Types

PicTemplateData {
  bgImage: string;
  list: Array<{
    type: 1 | 2; // 1-text 2-image
    content: string; // text or image url
    fontSize?: number'
    fontColor?: string;
    x: number;
    y: number;
    alignment: 1 | 2 | 3; // 1-left 2-center 3-right
    style?: {};
  }>;
}

PicTemplateOps {
  debug?: boolean; // default false
  imageType?: string; // default image/png
  autoRender?: boolean; // default true
  renderType?: 'blob' | 'base64'; // default base64
  timeout?: null | number; // default null
  renderEnd?: ({
    renderImage: string;
    canvas: HTMLCanvasElement;
  }) => void;
}