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

GitHub

View Github