How to take snapshot of a Div?

Ionic Framework Ionic Angular
1

lets say i have chart in UI, i need to take a screenshot of it and allow user to draw somethin on it. i have figured out drawing part. Need help on capturing content.

Thanks.

2

Take a look at HTML2Canvas html2canvas - npm
You can take a snapshot of any div and output it as an image.

For example, something like this:

var myDivToConvert =  document.getElementById("myDiv");
html2canvas(myDivToConvert).then((canvas)=> { 
  let dataUrl = canvas.toDataURL('image/jpeg', 0.9);  
  console.log(dataUrl); 
});
2 Likes
3

var node = document.getElementById(‘my-node’);

domtoimage.toPng(node)
.then(function (dataUrl) {
var img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
})
.catch(function (error) {
console.error(‘oops, something went wrong!’, error);
});

dom-to-image also works smooth