konvajs / use-image Goto Github PK

I need update coordinates of my image with setInterval, but everytime image is reloading (not caching)
How fix it?
My component:
`const Rocket = ({x, y}: any) => {
const [ image ] = useImage(rocket_img);

return (
    <Image
        image={image}
        width={44}
        height={82}
        offsetX={22}
        offsetY={62}
        rotation={45}
        x={x}
        y={y}
    />
);

}`

I have some input for upload the image and then show this image in Layer with useImage.
how to pass an image to useImage when uploading an image.

Dear use-image maintainers,
Thank you for your contribution to the open-source community.

This issue was automatically created to inform you a new version (1.0.11) of use-image was published without a matching tag in this repo.

As part of our efforts to fight software supply chain attacks, we would like to verify this release is known and intended, and not a result of an unauthorized activity.

If you find this behavior legitimate, kindly close and ignore this issue. Read more

The complete error looks like:

TS2322: Type '[HTMLImageElement | undefined, "loaded" | "loading" | "failed"]' is not assignable to type 'HTMLImageElement | SVGImageElement | HTMLVideoElement | HTMLCanvasElement | ImageBitmap | OffscreenCanvas | undefined'.
Type '[HTMLImageElement | undefined, "loaded" | "loading" | "failed"]' is not assignable to type 'OffscreenCanvas'.

I think this line should be changed:

My code is pretty simple as per the docs:

const win = {
  width: window.innerWidth,
  height: window.innerHeight,
}

const App = () => {
  const image = useImage('https://konvajs.org/assets/lion.png')

  return (
    <Stage width={win.width} height={win.height}>
      <Layer>
        <Image image={image} />
      </Layer>
    </Stage>
  )
}

According to https://opensource.org/licenses/MIT, the copyright notice in the license should be in the following format:

Copyright YEAR COPYRIGHT HOLDER

But the copyright notice in the license file states only the year.
I think it is important to have a full copyright notice in the license in order to avoid potential licensing problems for users of use-image.

I want to get basic image information like width and height - is that accessible through use-img?

Hello, I have a file with a big resolution, more than 11000px width, and 10000px height (11297 X 10550). After the file upload image size on the Android system has (7061x6594)

IOS and the Web have a normal size. Here is an example

How would I use this in some kind of loop? I have an array of objects each with their own image and I want to make sure the image is loaded before drawing it to the konva canvas. I don't want a load of useImage statements, plus I don't know how many there will be to load. Any ideas? Thanks

Hi,
How can I display an image that is stored in local or in variable ?
I don't understand this response : #21

It's to display the image in KonvaJS

hey! im just looking for a bit of help, how would you recommend to load an arbitrary amount of images (could be 5, could be 100+), and considering they're image files and not URL's (i.e not using a URL to link to them, theyre files in my create-react-app project).

I was thinking it would be best to show a loading screen (dont even load in the stage/konva) until all of them are loaded

Can I directly convert a base64 string of an image to a usable image using useImage?
This is what I am trying to do while creating a konva image component to use later in dom.

  const UseKonvaImage = ({ xPos = 50, yPos = 550, dragged, clicked, draggable, imageBase64 }) => { 
  const [image, status] = useImage(imageBase64);
  console.log("component Use Konva Image", imageBase64, status)
  return (
    <KonvaImage
      name="Test"
      image={image}
      x={xPos}
      y={yPos}
      draggable={draggable}
      onDragEnd={dragged}
      onClick={clicked}
    />
  );
};

It'd be great to have types available for this library.

const [image] = useImage('...');
return <Image image={image} />

the typescript warning:
Type 'HTMLImageElement | undefined' is not assignable to type 'ImageBitmapSource'.
Type 'undefined' is not assignable to type 'ImageBitmapSource'.ts(2322)
Image.d.ts(4, 5): The expected type comes from property 'image' which is declared here on type 'IntrinsicAttributes & ImageConfig & KonvaNodeEvents & ClassAttributes & { children?: ReactNode; }'

Here is an example that just ouput: Cannot set property '_id' of undefined

I can't install use-image on a project using [email protected] due to:

Not sure why the peerDependency uses a versioned number. It can be @latest, no?

Can you please publish a newer version using 17.0.1 or preferably latest?

When trying to add an svg into the stage, the added image is whether all white or all black.. tried it in various safari versions. 1st img in chrome, 2nd in safari 14.1 (in this example the image is the grid in the background

)

Hi, I am using this hooks to load image, however when I load my image using this hooks it gives me undefined response, my image is located in public folder and I am using next.js to do this

My code looks like this
Code 1

const [image] = useImage('/add.svg');
<Image image={image} />

Code 2

const [image] = useImage('/add.svg', 'Anonymous');
<Image image={image} />

In nextjs docs, it says, to access static files I just need to append / before the filename but the hooks return an undefined response.

React Component debugger

Network Response

When I run this locally, everything works fine. When I run it server side, the status changes to "loaded" but the image returns undefined. Any idea what might be going on? It's clear from the network monitor that the images are loading somewhere. They're just not ending up in the final render.

[email protected]
[email protected]
[email protected]
[email protected]

I am trying to modify the code to make it re-fetch the underlying image every x seconds.
Something along these lines.

However, I can't get it to work :/

Edit:
Wrapping the fetch, similar like here: stackoverflow works, but it does not cause a rerender.

The biggest usage for asynchronous loading is image and text. (i believe).
Are there any plans for supporting for loading fonts? (it's painful to use)

Anyone else some issues where the image is not been loaded correctly?

Struggling with this, as it does not always seem to happen. Am I missing something? Thanks!

import { Image, Rect } from 'react-konva';
import useImage from 'use-image';

import moon from '../../../assets/grid/moon.svg';

export function MoonItem({ width, height, rotation }) {
  const [image] = useImage(plant);
  return (
    <>
      <Image
        image={image}
        x={width / 2}
        y={height / 2}
      />
    </>
  );
}

Trouble

When use useImage render multiple images, It sucks as bellow last pic.

  const [image] = useImage(url);
 return <Image width={w} height={h} ref={imgRef} image={image}></Image>

Resolution

 const [imageFrame, setImage] = useState(new globalThis.Image());
// imageFrame.src = 'xxx'
// layer.draw();
 return <Image width={w} height={h} ref={imgRef} image={image}></Image>

So ,i wonder why we need a new instance? just In order to avoid manual draw layer?

  React.useLayoutEffect(
    function () {
      if (!url) return;
      var img = document.createElement('img');
    [url, crossOrigin, referrerpolicy]
  );