Contents
PicTemplate
A Vue Component for html2canvas
html2canvas
Vue support
Supports only Vue >= 2
Installation and usage
<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;
}