html-to-image | ✂️ Generates an image from a DOM node using HTML5 canvas | Canvas library

Please check this code, download it and run it on the browser. the download will not work directly from StackOverflow

Your docker container does not have the browser and it will not launch the one installed at the docker's host. You might like the next explanation to run chrome from a docker container:

https://medium.com/dot-debug/running-chrome-in-a-docker-container-a55e7f4da4a8

The peer error is coming from puppeteer-cluster. It seems that the puppeteer-cluster puppeteer version is outdated compared to the puppeteer version you're running at the root of the project (mismatch between 13.0.1 and 13.0.0).

puppeteer-cluster has its own puppeteer version. You don't need to install both packages (even tho it says so in the documentation).

1. npm uninstall puppeteer
2. npm uninstall puppeteer-cluster
3. npm i puppeteer-cluster

If that doesn't fix it you could always force puppeteer-cluster install through npm i puppeteer-cluster --force.

Testing your example on iOS safari(v15), I've also encountered this issue.

Basically, the svg to image conversion process involves:

1. creating a Blob/Blob URL (see also What is a blob URL and why it is used?)
2. render it to a canvas
3. return a data url

For some reasons (at least some) safari versions, apparently need some delay to render the canvas properly.

This example employs both the initially used html2canvas (library/script based) and a stripped down js code.

Which browser are you using? I assume you are on Chrome and its version 92. SharedArrayBuffer has been turned off by default starting that version. Find out more information here: https://developer.chrome.com/blog/enabling-shared-array-buffer/

TL;DR is you need to enable "cross-origin isolation" on your page which requires you a few things: Send two HTTP headers - Cross-Origin-Opener-Policy : same-origin and Cross-Origin-Embedder-Policy: require-corp. By this, your page will be cross-origin isolated and no longer be able to load cross-origin resources unless they are opt-in, but you can start using SharedArrayBuffer. You can learn more how to implement this: https://web.dev/cross-origin-isolation-guide/

You can try setting different headers in this demo page: https://first-party-test.glitch.me/

If you want a quick solution to fix the issue, you may opt your site into an allowlist to continue using SharedArrayBuffer until Chrome 96 by registering to an origin trial: https://developer.chrome.com/blog/enabling-shared-array-buffer/#origin-trial

Chrome team is hoping to introduce easier options to enable cross-origin isolation. Learn more here: https://developer.chrome.com/blog/coep-credentialless-origin-trial/

Ok after some time I have a solution that worked for my needs which were :

1. Point to a div in a React Component, and pdf it
2. Preserve styling

and extra:

1. Have the ability to programmatically customize and control with my metadata in a DB
2. The customization was to add header, footer, page numbers, front page, and I can technically control every single page

I used https://www.npmjs.com/package/@progress/kendo-react-pdf

I used its savePDF function that allowed me to also have a template creating type functionality because it come free and is passed in as a prop in the options argument you'll see in the code.

Also there is a css selector that targets JUST the PDF'ed div passed already no need to specify what to show and what not to show, so you can actually manipulate the PDF right before it comes out completely from here.

In the video demo you'll see I have a MASSIVE div comes out to OVER 40 pages! Preserved my material and css styling and I could add whatever I want at will. I even added a watermark!

Hope this helps people out!

There is a pretty simple common function which converts image data url to a file object defined as following:

One of your dependencies is not using ES5-compliant code for older browsers and will need to be transpiled.

You need to narrow which dependency is producing this code and transpile it using babel. This dependency can be the result of a sub-dependency to a main dependency, so you may have to traverse the entire dependency tree all the way down to find the culprit. A simple example would be: @nivo is a React charting package that has a sub-dependency called d3-scale which dropped support for IE11 and can't be polyfilled, therefore it needs to be transpiled by babel to work in IE11:

next.config.js

The issue is that you are mutating state.