mugshot VS html2canvas

I use tsdoc + typedoc to generate the documentation for Mugshot, a visual regression testing library. You can see the docs at http://nighttrax.github.io/mugshot/ and the code at https://github.com/NiGhTTraX/mugshot. I found it pretty useful to write the documentation close to the code so that users of the library will get a nice experience in their IDE when they hover over methods and on top of that also generate some pretty online docs.

GItHub :- https://github.com/niklasvh/html2canvas

That's slightly harder, but still possible by first rendering the HTML onto a canvas.

Example here: http://html2canvas.hertzen.com/

If you have it working in the browser you could use this.https://html2canvas.hertzen.com/

, etc. for styling. So we need to parse our DOM as canvas and then convert it into a png. There's a libary which helps us do just that. html2canvas. We modify our downloadQRCode function such that first we get snapshot of our DOM as a canvas then we convert that into a png. Final code // QRCodeTemplate.tsx import React from "react" import html2canvas from "html2canvas" import { QRCodeCanvas } from "qrcode.react" import Button from "components/Button" import QRCodeTemplate from "components/dashboard/QRCodeTemplate" const QRCodeDownload = () => { const url = "https://anshsaini.com" const getCanvas = () => { const qr = document.getElementById("fancy-qr-code") if (!qr) return return html2canvas(qr, { onclone: snapshot => { const qrElement = snapshot.getElementById("fancy-qr-code") if (!qrElement) return // Make element visible for cloning qrElement.style.display = "block" }, }) } const downloadQRCode = async () => { const canvas = await getCanvas() if (!canvas) throw new Error(" not found in DOM") const pngUrl = canvas .toDataURL("image/png") .replace("image/png", "image/octet-stream") const downloadLink = document.createElement("a") downloadLink.href = pngUrl downloadLink.download = "QR code.png" document.body.appendChild(downloadLink) downloadLink.click() document.body.removeChild(downloadLink) } return (

QRCodeTemplate>

Download QR CodeButton> div> div> ) } export default QRCodeDownload Enter fullscreen mode Exit fullscreen mode The Result We have a beautiful QR code saved as a png. And with the power of React, we can create as many styles as we want.

Hey guys, I using html2canvas in our project and I am facing this issue.

use http://html2canvas.hertzen.com/ to convert the div to an image if you want

This looks super useful! I’ve previously used [html2canvas](https://html2canvas.hertzen.com/) to make a simple tool for generating graphics for a news org, but I can see myself using this going forward.