Please verify Image component loading behaviour about react-konva HOT 18 CLOSED

Looks correct.

But do not use imageFactory in render function. As a result, you will have new image instance on any render() call.
So I suggest to move imageFactory somewhere outside of render(). But I am not sure is it related to your bug or not.

from react-konva.

Probably we will need better API. Just src property for Image component.

from react-konva.

src would be great. The example I posted is a bit simplified, in reality imageFactory is called once per component. But it still exhibits strange loading behaviour.

from react-konva.

Can make a jsbin (or similar) demo?

from react-konva.

@baadc0de I would suggest you attach an onload and onerror handler to your image instance. In the callbacks you track the loaded/error status with local state using setState.

from react-konva.

Here is my implementation, its a little verbose perhaps could be simpler. This will only load an image once if it used multiple times and allows for an alternate image if there is an error loading the desired image. Also fits the image or fills it to the dimensions of a given boundary.

https://gist.github.com/andrewluetgers/7c4a90cbe6341c401d0b7975a8ceeedb

from react-konva.

@andrewluetgers Great, it's working for me.

from react-konva.

In order to render an image on a Stage, is there a way to avoid using document.createElement('img') since document is unknown in server side rendering? Any input on that matter would be much appreciated!

from react-konva.

@vwrobel You you rendering React app in node? What is your use case?

from react-konva.

@lavrton Yes, I render a react app using a universal setting. I understand that I need to create an img HTML element: since server side does not know the document variable, I would need to have a different renderer for client and server using a switch case if (typeof(window) == 'undefined')... I wanted to load existing svg images and animate it with your code. I think I will rather recreate my image using Path from ReatKonva. It handles well server side rendering! Thanks.

from react-konva.

It is not possible to render Stage on a server side because react-konva works inside the canvas element. I didn't try react-konva on server side yet but I guess it should give just <div> in HTML output. So I suggest just skip whole Stage rendering on a server environment. like

const myGraphicsComponent = () => {
   if (isNode) {
      return null;
   }
   else {
    return  <Stage>{/* some components inside*/}</Stage>
   }
}

from react-konva.

I added image example into README

from react-konva.

If the Stage does not rely on DOM, I can use react-konvas to render the whole picture on server side using https://github.com/Automattic/node-canvas. The use-case would be a user uses react-konvas in browser to do some photo editing jobs and the server render the result to a static image for another usage (preview or printing).

from react-konva.

I know this is really old issue, but have there been any updates regarding this since this issue was raised? I have a requirement right now to render a canvas into an image on the server and I was wondering what's the best way to go about it.

I'm storing the React state as JSON for serialisation/de-serialisation purposes, and using this JSON we'd like to replace some values (text content etc.) in the JSON and create an image out of it on demand on the server. Is there no way to accomplish this without a full browser running the React app?

from react-konva.

Do you already have all the react components?

If not, it may be simpler to use https://github.com/Automattic/node-canvas directly or try konva-node.

from react-konva.

There are multiple aspects to this in our application that I fear may make it not so simple. We have an existing React application in which we need to add a new feature where users can drag, drop and edit shapes to build an image template. Getting this going using react-konva has been a breeze and we are happy with the outcome. The only missing piece is finally generating the image itself from the template on the server side.

We are limited to creating the image on the server due to requirements wherein the template will have placeholders that can only be replaced with actual data on the server, but the canvas itself will be designed in the browser. This is why we are inclined to stick with react-konva if possible.

from react-konva.

Good use case.

From my point of view, running the browser on the server-side with https://github.com/puppeteer/puppeteer/ with be the best and most predictable solution.

Running fully on the server-side with nodejs only is harder. I don't know how React's lifecycle methods work in that case, but they are required to run react-konva and especially some of react-konva component, like images, when you have to wait to load and draw them.

I was using puppeteer in one of my projects. And it was working well enough. The only issue I have is the performance. If you have too many projects to render, it may cost a lot of server resources.

from react-konva.

That sounds like a viable solution for our use case as performance is that not critical. We'll try out that route, thanks for the tip!

from react-konva.