时间戳

首页 > 解决方案 > Html2canvas base 64图形背景黑色

javascript - Html2canvas base 64图形背景黑色

问题描述

我尝试使用 html2canvas 转换 base 64 中的图形。我的代码component.html。

  <div *ngIf="sem_chart" style="max-width: 100vw; padding-bottom: 20px; margin-bottom: 50px; background: white !important" id="kilos_acreditados_sem">
  <h4>Kilos acreditados semana: {{semana_elegida}}</h4>
  <ngx-charts-bar-vertical-2d style="fill: white !important"
    [view]="view_sem_year"
    [scheme]="colorSchemeSemYear"
    [results]="multi_sem_year"
    [gradient]="gradient"
    [xAxis]="showXAxis"
    [yAxis]="showYAxis"
    [legend]="showLegend"
    [legendPosition]="legendPosition"
    [groupPadding]="2"
    [yAxisTickFormatting]="yAxisFormating"
    [legendTitle]="legendTitle"
  >
  </ngx-charts-bar-vertical-2d>
</div>

组件.ts

 html2canvas(document.getElementById("kilos_acreditados_sem"), { scale: 0.8, backgroundColor: '#ffffff' }).then(canvas => {
          canvas.style.background = '#ffffff';
          canvas.fillStyle = '#ffffff';
          var data = canvas.toDataURL('image/png');
          this.imgKilosAcreditados = data;
          let img = canvas.toDataURL("image/jpeg", 1.0);
          let imgElement = document.createElement("img");
          imgElement.src=img
          console.log("img = ", img)
          // console.log('this.imgKilosAcreditados', this.imgKilosAcreditados);

        });
      }, 3000);

我尝试捕获这个（那个）[1]：https : //i.stack.imgur.com/hqt8j.png，但结果它是[2]：https://i.stack.imgur.com/Fd8​​d8。 png 我认为（或猜测）没有捕获属性填充，但我知道如何继续解决此问题。这张图片我需要显示pdfmake。对不起，我的英语不好。

标签： javascriptangularhtml2canvaspdfmake

解决方案

推荐阅读