HTML2Canvas库仅使用文本和背景色不拾取图像

时间:2019-04-27 18:55:55

标签: javascript jquery css3 vue.js html2canvas

我正在尝试对我的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:''
}

0 个答案:

没有答案