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
}
}]
}
}
});
