search

cheapsteak / npmcharts.com

Compare npm package downloads over time
https://npmcharts.com/
MIT License
157 stars 25 forks source link

Allow exporting image (without screen cap) #55

Closed cheapsteak closed 3 years ago

cheapsteak commented 6 years ago

Currently have to go into minimal mode and screen cap

Should have a single button that exports the current view

kenrick95 commented 3 years ago

This is technically possible by introducing a button to link to the image link generated for og:image right?

cheapsteak commented 3 years ago

@kenrick95 that wouldn't quite export the current view, would prefer if it exports exactly what the user is seeing :)

This looks promising - https://www.npmjs.com/package/html-to-image , specifically the toBlob

maybe make a new button (to the right of "download csv") and attach this to the onclick 

htmlToImage.toBlob(document.getElementById('my-node'))
  .then(function (blob) {
    fileSaver.saveAs(blob, 'my-node.png');
  });

(would also need https://www.npmjs.com/package/file-saver , which is fine (just 1.2kb gzipped))

kenrick95 commented 3 years ago

Cool! Let me try this out 😁

kenrick95 commented 3 years ago

Okay I tried that html-to-image package, and it seems like it doesn't generate a very good image.

npmcharts-chart

May be related to this bug report

[..] it doesn't seem to be processing CSS classes for SVG elements [..]

p.s. I also tried html2canvas and it has similar issues with rendering svg

npmcharts-chart2

Seems like a simpler solution that would get an accurate svg rendering is the og:image (which I believe is generated using headless browser 😅 )

cheapsteak commented 3 years ago

@kenrick95 thanks so much for investigating!