html2canvas VS yoga

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.

We still wanted to leverage a layout engine that could be performant and easy-to-use. After doing some performance testing with native UIKit, Autolayout, and a few other third-party options, we ended up bringing FlexLayout into the mix, which is a Swift implementation of Facebook’s Yoga layout engine. All RPL components utilize FlexLayout in order to lay out content fast and efficiently. While we’ve enjoyed using it, we’ve found a few touch points to be mindful of. There are some rough edges we’ve found, such as utilizing stack views with subviews that use FlexLayout, that often come at odds with both UIKit and FlexLayout’s layout engines.

We have our own test suite (orginally derived from the test suite of Meta's Yoga layout library [0]) which consists of text fixtures that are small HTML snippets [1] and a test harness [2] that turns those into runnable tests, utilising headless chrome both to parse the HTML and to generate the assertions based on the layout that Chrome renders (so we are effectively comparing our implementation against Chrome). We currently have 686 generated tests (covering both Flexbox and CSS Grid).

We would like to utilise the Web Platform Test suite [3], however these are not in a standard format and many of the tests require JavaScript so we are not currently able to do that.

[0]: https://github.com/facebook/yoga

[1]: https://github.com/DioxusLabs/taffy/tree/main/test_fixtures

[2]: https://github.com/DioxusLabs/taffy/tree/main/scripts/gentes...

[3]: https://github.com/web-platform-tests/wpt/tree/master/css/cs...

The "engine" is built on top of amazing https://www.lwjgl.org/ and https://github.com/bkaradzic/bgfx/, and UI system is baked by https://github.com/memononen/nanovg and https://github.com/facebook/yoga

React Native uses the Yoga engine under the hood, which allows you to use CSS properties to layout your React Native UI in a way that translates really well. Layout in Yoga is limited to Flexbox and absolute/relative positioning, however; there is no CSS grid and no display attribute. This keeps things simpler and more performant, but if developers are accustomed to using other layout techniques on the web, they’ll need to adjust to this new limitation.

PR #246 is super interesting to check out: by fixing the caching strategy, we were able to eliminate an exponential time (with respect to tree depth) performance penalty, and get comparable speeds for flat and deeply nested layouts (something I'd never expected to be possible). Preliminary benchmarks shows us significantly faster than yoga, Meta's C++ library for the same thing, especially on deep trees. Not too shabby for a tiny team of volunteers!

You're going to build the CLI using Ink, a React component-based library for building interactive CLIs. It uses Yoga to build Flexbox layouts in the terminal, so most CSS-like props are available in Ink as well. Ink is simply a React renderer for the terminal, so all the React features are supported. No need to learn a new syntax specific to Ink.

Interesting.

I was thinking that this was going to be a crazy amount of layout engine work, but now I look a little closer it appears the layout work is farmed out to yoga [0] (not trying to take away anything from the effort here). So this project is almost a wrapper around running yoga as a renderer and using SVG as a form of backend target?

I say "appears" because the yoga landing page doesn't do a great job of explaining what it does.

[0] https://github.com/facebook/yoga