Библиотека Html2canvas не воспринимает изображение, используя только текст и цвет фона - PullRequest
Новая
       17

Библиотека Html2canvas не воспринимает изображение, используя только текст и цвет фона

0 голосов
/ 27 апреля 2019

Я пытаюсь сделать снимок экрана моего 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:''
}
...