59 lines
1.4 KiB
Vue
59 lines
1.4 KiB
Vue
<template>
|
|
<view>
|
|
<view class="html2canvas" :prop="domId" :change:prop="canvasImage.generateImage">
|
|
<slot ></slot>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'html2canvas',
|
|
props: {
|
|
domId: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
methods: {
|
|
htmlToCanvas (option) {
|
|
let posterImg = option.posterImg;
|
|
this.$emit('renderFinish', posterImg);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<script lang="renderjs" module="canvasImage">
|
|
import html2canvas from 'html2canvas'
|
|
export default {
|
|
methods: {
|
|
// 生成图片需要调用的方法
|
|
generateImage(domId) {
|
|
// 获取设备dpi
|
|
setTimeout(() => {
|
|
let dom = document.getElementById(domId);
|
|
console.log(dom.offsetWidth, dom.offsetHeight);
|
|
html2canvas(dom, {
|
|
scale: 2,
|
|
useCORS: true,
|
|
dpi: 300,
|
|
taintTest: true,
|
|
}).then((canvas) => {
|
|
// this.$refs.header.appendChild(canvas);
|
|
const posterImg = canvas.toDataURL()
|
|
this.$ownerInstance.callMethod('htmlToCanvas', {
|
|
posterImg: posterImg
|
|
})
|
|
}).catch((err) => {
|
|
console.log(err)
|
|
})
|
|
}, 3000);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
</style>
|