Screenshot plugin returns black image when page has any canvas


#1

I’m working on a project and i need to take a Screenshot of a page with some charts (Chart.js) on it and i need to share that screenshot on social medias. When i take a screenshot in a page without canvas everything is ok, but when a canvas is in the page i get a black image. Is there other way to take a screen shot? How can i solve that?

This is my html code for canvas

<ion-card>
  <ion-card-content>
    <canvas id="lineChartLibres" #lineChartLibres></canvas>
  </ion-card-content>
</ion-card>

This is my ts file with the screenshot function and canvas binding with charts

compartir(){
    this.platform.ready().then(() => {
         this.screenshot.URI(100)
           .then((res) => {
               console.log(res);
               this.socialSharing.share("Compartiendo mis estadisticas",null, res , null)
                 .then(() => {},
                   () => {
                     alert('SocialSharing Error');
                   });
             },
             () => {
               alert('Screenshot Error');
             });
       });
  }

@ViewChild('lineChartLibres') public lineChartLibres: any;

  this.lineChartLibres = new Chart(this.lineChartLibres.nativeElement, {
            type: 'line',
            data: {
                labels: [1, 2, 3, 4, 5, 6, 7 ],
                datasets: [
                    {
                        label: "Porcentaje tiros libres",
                        fill: false,
                        lineTension: 0.3,
                        backgroundColor: "rgba(75,192,192,0.4)",
                        borderColor: "rgba(75,192,192,1)",
                        borderCapStyle: 'butt',
                        borderDash: [],
                        borderDashOffset: 0.0,
                        borderJoinStyle: 'miter',
                        pointBorderColor: "rgba(75,192,192,1)",
                        pointBackgroundColor: "#fff",
                        pointBorderWidth: 1,
                        pointHoverRadius: 5,
                        pointHoverBackgroundColor: "rgba(75,192,192,1)",
                        pointHoverBorderColor: "rgba(220,220,220,1)",
                        pointHoverBorderWidth: 2,
                        pointRadius: 1,
                        pointHitRadius: 10,
                        data: this.dataLibres,
                    }, options: {
                         scales: {
                           yAxes: [{
                              ticks: {
                                 suggestedMin: 0,
                                 suggestedMax: 100
                              }
                            }]
                           }
                          }
                       });

#2

Just to make sure:
Can you take a screenshot of the canvas element using the native OS screenshot functionality?

is https://ionicframework.com/docs/native/screenshot/ I assume?


#3

Yes, i can take a screenshot, but when there is a canvas element i get a black screen too. I saw that some people reported the same issue at the plugin repo (https://github.com/gitawego/cordova-screenshot) but there’s not a solution yet


#4

I am not sure if you read and understood my question:
Is it also black when you do a screenshot not with the plugin but manually, with the normal OS functionality of pressing some buttons in the correct order?


#5

oh! Sorry! I´m from Argentina and my english is kind of bad. If i took the screenshot manually i get the image of the screen whitout problems, it isn’t black.


#6

Ok, so it is not a general problem but something with the Cordova plugin :confused:

How about this workaround? https://github.com/gitawego/cordova-screenshot/issues/87#issuecomment-253930933