92 lines
2.2 KiB
Vue
92 lines
2.2 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 当父组件传递的prop属性数据发生变化的时候 ,生成海报图片-->
|
||
<view :prop="domId" :change:prop="html2canvas.emitData" class="html2canvas">
|
||
<slot></slot>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { base64ToPath } from '@/utils/image-tools.js';
|
||
export default {
|
||
props: {
|
||
domId: {
|
||
type: String,
|
||
required: true
|
||
}
|
||
},
|
||
mounted:function(){
|
||
console.log("组件加载完成");
|
||
},
|
||
|
||
methods: {
|
||
// 接收renderjs发回的数据
|
||
async receiveRenderData(imgData) {
|
||
let posterHeight=imgData.height;
|
||
let posterWidth=imgData.width;
|
||
let imgPath =await base64ToPath(imgData.imgVal, '.jpeg');
|
||
this.$emit('renderFinish', {"posterPath":imgPath,"posterHeight":posterHeight,"posterWidth":posterWidth});
|
||
uni.hideLoading();
|
||
},
|
||
showLoading() {
|
||
uni.showLoading({
|
||
title: "正在生成导出",
|
||
icon: "none",
|
||
mask: true,
|
||
duration: 3000
|
||
})
|
||
},
|
||
hideLoading() {
|
||
uni.hideLoading();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
<script module="html2canvas" lang="renderjs">
|
||
import html2canvas from 'html2canvas';
|
||
export default {
|
||
data() {
|
||
return {
|
||
}
|
||
},
|
||
mounted:function(){
|
||
console.log("视图层渲染完成");
|
||
},
|
||
methods: {
|
||
// 发送数据到逻辑层,下面这里最好是加一个settimeout延迟,因为主界面数据还没加载渲染完成
|
||
emitData(domId) {
|
||
this.$ownerInstance.callMethod('showLoading', true);
|
||
const dom = document.getElementById('poster');
|
||
console.log("dom",dom);
|
||
let width= dom.offsetWidth;
|
||
let height=dom.offsetHeight;
|
||
let windowHeight= uni.getSystemInfoSync().windowHeight;
|
||
let windowWidth=uni.getSystemInfoSync().windowWidth;
|
||
html2canvas(dom, {
|
||
width:width,
|
||
height:height,
|
||
//scale:2.5, // 缩放倍数
|
||
scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
|
||
scrollX: 0,
|
||
x:0,
|
||
y:0,
|
||
windowWidth:windowWidth,
|
||
windowHeight:windowHeight,
|
||
useCORS: true, //支持跨域，但好像没什么用
|
||
}).then((canvas) => {
|
||
let imgVal= canvas.toDataURL('image/png');
|
||
this.$ownerInstance.callMethod('receiveRenderData',{imgVal:imgVal,height:height,width:width});
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
|
||
<style lang="scss">
|
||
|
||
</style>
|