HTML2Canvas генерирует пустое изображение в Ionic4 угловой программе.Нет ошибки в консоли.Тот же код генерирует правильное изображение в простом html / javascript - PullRequest
Новая
       14

HTML2Canvas генерирует пустое изображение в Ionic4 угловой программе.Нет ошибки в консоли.Тот же код генерирует правильное изображение в простом html / javascript

0 голосов
/ 12 февраля 2019

У меня установлен html2canvas и импортирован в home.page.ts в моем тестовом проекте Ionic4 angular.У меня есть обычный 100xx100px, желтый фон div с одной строкой текста.Я передаю этот div в html2canvas для загрузки в формате png.html2canvas перечисляет все шаги (без ошибок) в консоли и генерирует png с тем же размером, что и данный div, но div пуст. Он не имеет цвета div или текста.

Изменение размера div вступает в силу правильно, означая, что сгенерированное изображение имеет тот же размер, что и div.Этот тестовый проект демонстрирует проблему - https://stackblitz.com/edit/html2cavasionic4test.

Вот мой home.page.ts 

import { Component } from '@angular/core';
import * as html2canvas from 'html2canvas';


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  selected = 1;
  list: any = [{ id: 0, text: '0' }, { id: 1, text: 1 }];
  changed(e) {
    console.log(this.selected);
  }
  onPrintClicked(){
    let div = document.getElementById("h2cTest");
    const options = {allowTaint:true, background: "yellow", height: div.clientHeight, width: div.clientWidth };
    html2canvas.default(div, options)
    .then((canvas)=>{
      var myImage = canvas.toDataURL("image/png");
      console.log("image done");
      this.downloadURI("data:" + myImage, "yourImage.png");
    })
    .catch(()=>{})
  }
  downloadURI(uri, name) {
    var link = document.createElement("a");
    link.download = name;
    link.href = uri;
    link.click();
    //after creating link you should delete dynamic link
    //clearDynamicLink(link); 
  }

}

На моей локальной машине я создал простую страницу html / javascript с той же функциональностью, что ив вышеупомянутом проекте stackblitz и включил скрипт html2canvs.min.js на странице.Эта простая страница работает должным образом и генерирует правильное изображение.

html2Canvas, как ожидается, сгенерирует изображение div, но оно генерирует пустое изображение.Что-то не так с настройкой?

Обновление

Тег приложения был проблемой.

...