PicTemplate

A Vue Component for html2canvas

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;
}