I'm trying to get an img from a div containing some charts. Unfortunately, the generated image appears to be randomly corrupted.

I'm using chart.js to draw charts, and I've tried dom-to-image and html-to-image, with the same results. I have tried html2canvas too, but it appears to be too slow for me (12 seconds to get my div screenshotted is way too much). Here it is a jsfiddle test, that gives me random errors. https://jsfiddle.net/q7fwm4yt/1/

var node = document.getElementById('chart_container');
  domtoimage.toPng(node)
  .then(function (dataUrl) {
  var img = new Image();
  img.src = dataUrl;
  $('.cloned').append(img);
  })
    .catch(function (error) {
      console.error('oops, something went wrong!', error);
});

On button click, it randomly gets me a blank (corrupted) image. Thanks for any help.

CodePudding user response：

You can use this website By simple pasting the html in the website it will automatically generate the image for you

https://htmlcsstoimage.com/

CodePudding user response：

Have you tried to re-upload the image again? That usually fixes corruption.