我正在尝试对我的div进行屏幕截图。在我的div中,我有一个子组件,我正在将道具中的图像传递给该子组件。图像显示完美。当我单击该组件时,html2canvas仅拍摄组件html2canvas函数内部运行的文本的图像。它需要孩子中的文本和背景,但不会在div上拾取图像。
Here is the source code of what i have tried to do:
https://github.com/sidratariq/Signatureimage
子组件: =================================
<div class="card" :style="{backgroundImage:'url('+thumbnail+')', position:'relative', }">
<slot></slot>
adjakdaja
</div>
props: ["title", "previewtext", "thumbnail", "topspace", "bottomspace"],
==================================
**Parent component**
----------------------------------
<Tomato
ref="Tomato"
@click.native="print('Tomato')"
value="i am from the parent"
thumbnail="http://theurbanrecipes.com/wp-content/uploads/2016/12/shrimp-with-broccoli.jpg"
title="Sidra"
previewtext="awesome pizza"
topspace="20"
bottomspace="80"
>
<!-- loop for looping on -->
<div v-for="(i,index) in coordinates" :key="index">
<img
:style="{content:'url('+space+')',position:'absolute',top:i.Topcord+'px',left:i.Leftcord+'px',width:widthset,height:heightset}"
>
</div>
</Tomato>
<hr>
<img :src="output">
data()=>{
coordinates: [
{
ContractID: "5c1c5ccf-529c-42da-b96e-65fbee2de18e",
UserID: "",
Name: "Signature",
Topcord: 20,
Leftcord: 210
},
{
ContractID: "5c1c5ccf-529c-42da-b96e-65fbee2de18e",
UserID: "",
Name: "Initial",
Topcord: 20,
Leftcord: 426
},
{
ContractID: "5c1c5ccf-529c-42da-b96e-65fbee2de18e",
UserID: "",
Name: "Name",
Topcord: 0,
Leftcord: 316
}
],
output:''
}