fayeed / use-screenshot Goto Github PK

I was unable to get this to work on Safari; however it did work on Chrome for Mac. Is that a known issue?

I want to take screenshot of a special div in my page.

Can I do that using this library?

TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
at px (index.es.js?2c84:170:1)
at Object.getNodeWidth (index.es.js?2c84:174:1)
at getImageSize (index.es.js?2c84:800:1)
at toSvgDataURL (index.es.js?2c84:806:1)
at toCanvas (index.es.js?2c84:816:1)
at toPng (index.es.js?2c84:847:1)
at eval (index.es.js?2c84:897:1)
at step (index.es.js?2c84:50:1)
at Object.eval [as next] (index.es.js?2c84:31:46)
at eval (index.es.js?2c84:24:1)
at new Promise ()
at __awaiter (index.es.js?2c84:20:1)
at eval (index.es.js?2c84:882:65)
at onClick (Third.tsx?bc39:427:32)
at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:3994:1)
at invokeGuardedCallback (react-dom.development.js?61bb:4056:1)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js?61bb:4070:1)
at executeDispatch (react-dom.development.js?61bb:8243:1)
at processDispatchQueueItemsInOrder (react-dom.development.js?61bb:8275:1)
at processDispatchQueue (react-dom.development.js?61bb:8288:1)
at dispatchEventsForPlugins (react-dom.development.js?61bb:8299:1)
at eval (react-dom.development.js?61bb:8508:1)
at batchedEventUpdates$1 (react-dom.development.js?61bb:22396:1)
at batchedEventUpdates (react-dom.development.js?61bb:3745:1)
at dispatchEventForPluginEventSystem (react-dom.development.js?61bb:8507:1)
at attemptToDispatchEvent (react-dom.development.js?61bb:6005:1)
at dispatchEvent (react-dom.development.js?61bb:5924:1)
at unstable_runWithPriority (scheduler.development.js?3069:468:1)
at runWithPriority$1 (react-dom.development.js?61bb:11276:1)
at discreteUpdates$1 (react-dom.development.js?61bb:22413:1)
at discreteUpdates (react-dom.development.js?61bb:3756:1)
at dispatchDiscreteEvent (react-dom.development.js?61bb:5889:1)

I have a scrollable div, that I pass ref in to it, but it only takes the screenshot from the top part of the div, and I want it to take the screenshot of the full height.
Is this possible?

Whenever I use this plugin to take a screenshot, I always get a blank screenshot.

I am using the example code, but still, it is not working on my website, This is my code.

import React, { createRef } from "react";
// import Text from "./Text";
import { useScreenshot, createFileName } from "use-react-screenshot";

export default () => {
    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>
            <button onClick={downloadScreenshot}>Download screenshot</button>
            <div
                ref={ref}
                style={{
                    border: "1px solid #ccc",
                    padding: "10px",
                    marginTop: "20px"
                }}
            >
                Hellow World
            </div>
        </div>
    );
};

how to capture screenshot for particular div in react

https://www.npmjs.com/package/use-screenshot-hook links to https://github.com/fayeed/use-screenshot-hook instead of https://github.com/fayeed/use-screenshot

I have a project requirement in which there are two divs who will start live streaming i.e. video calls when they connected over the network.

So Is it can achieve with this library? There are header and sidebar components as well. So along with it, I want a screenshot of the whole page which contains the header, sidebar, and the live streaming as well.

Please help me out!

const ref = createRef()
const { image, takeScreenshot } = useScreenshot({ ref: ref })

return(
  <div ref={ref as React.RefObject<HTMLDivElement>}>
    {selectedItem && (
      <>
        <img
          className={`
                  ${css({
                    objectFit: 'cover',
                    objectPosition: 'center',
                    maxWidth: '100%',
                  })}
                  h-100
                `}
          src={getImage(selectedItem.images['3x']) || ''}
          alt={'img'}
        />
        <button onClick={() => takeScreenshot()}>TouchMe</button>
      </>
    )}
  </div>
)

It is returning the error TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

I think this error is because I am using nextJS.

Getting document.getElementById('root') is getting null, we should get document.getElementById('__next'), then, we can improve the library sending a new param with the id we want to get like as "root" in the useScreenShot() function or if it is returning null check with the first "root", try with "__next".

I have 4 div inside one div, I want to take 4 different screenshot for those div

well, I am trying to take a screenshot of a particular div/component that contains a layered/masked image using usescreenshot in react, though I am only getting the color of the topmost layer that i am dynamically changing using color picker, what i actually want is to change the color of a car's body, tyre and rim using color picker and then take a screenshot of my color choice but i am unable to find a direction how to resolve?
const generateImgRef = useRef(null);
<button onClick={() => exportAsImage(generateImgRef.current, "test")}>

Could not take screenshots using the use-screenshot-hook method in react-apexcharts. Got an error please send the solutions.