Question

119

Created image with use-react-screenshot is incorrectly rendered

rated 0 times [ 121] [ 2] / answers: 1 / hits: 5935 / 2 Years ago, sun, february 20, 2022, 12:00:00

I'm using use-react-screenshot to take a screenshot of a specific dom element, but the image gets weird, it looks like it partially renders the dom element

I'm using the sample code in create-react-app

import logo from ./logo.svg;

import ./App.css;

import { createRef } from react;

import { useScreenshot, createFileName } from use-react-screenshot;



function App() {

    const ref = createRef(null);

    const [image, takeScreenShot] = useScreenshot({

        type: image/jpeg,

        quality: 1.0,

    });



    const download = (image, { name = img, extension = jpg } = {}) => {

        const a = document.createElement(a);

        a.href = image;

        a.download = createFileName(extension, name);

        a.click();

    };



    const downloadScreenshot = () => takeScreenShot(ref.current).then(download);



    return (

        <div className=App>

            <header className=App-header>

                <button onClick={downloadScreenshot}>

                    Download screenshot

                </button>

                <img src={logo} className=App-logo alt=logo ref={ref} />

            </header>

        </div>

    );

}



export default App;

A sandbox to play around with it

I'm not sure if it's related to html2canvas as a peerDependency. And wherever I put the ref to, the same error happens

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mackennamelissac

Add To Favorites

Follow

Total Points: 110

Total Questions: 118

Total Answers: 103

Location: Sweden

Member since Sun, Jan 16, 2022

2 Years ago

mackennamelissac questions

1 Attempted import error: 'GridActionsCellItem' is not exported from '@mui/x-data-grid'

Mon, Sep 27, 21, 00:00, 3 Years ago

1 How do I read a local JSON file in Angular 12?

Thu, Jun 3, 21, 00:00, 3 Years ago

1 How to edit input value in React Js?

Tue, Mar 23, 21, 00:00, 3 Years ago

1 npm ERR A complete log of this run can be found in

Sun, Dec 27, 20, 00:00, 3 Years ago

1 Update a select's options based on another dropdown, using React

Mon, Oct 19, 20, 00:00, 4 Years ago

View All

answered 2 Years ago joseluispauld · Accepted Answer

On github there were a lot of issues related with SVG not downloading properly with html2canvas. I suspect these to be the issues. Solutions / workaround provided by users includes code modifications to the internal code. This is again hard to maintain further along. Also Firefox showed blank image when downloaded.

My best solution would be to use an alternative library like html-to-image. Within a few minutes everything seems to be working with this. (Even Firefox)

import * as htmlToImage from "html-to-image";

...

  const takeScreenShot = async (node) => {

    const dataURI = await htmlToImage.toJpeg(node);

    return dataURI;

  };



  const download = (image, { name = "img", extension = "jpg" } = {}) => {

    const a = document.createElement("a");

    a.href = image;

    a.download = createFileName(extension, name);

    a.click();

  };



  const downloadScreenshot = () => takeScreenShot(ref.current).then(download);

...

Codesandbox

Now this might not be the best solution, but it is the best alternative working solution right now.