Callback on Drawing Complete

[finbar123]

Hi
Excellent library,

Using konva-react we have a use case where we need to render a konva stage so that we can take a base64 image for use in further processing. But our call to grab the image is returning only a partial image.

is there a way we can check that drawing prrcess is complete before we call toDataURL ?

Basically we change state on the parent to force a render, pass back the ref in componentDidMount, call toDataURL(callbackFunction) wait for the callback and then reset the state to remove the react canvas

the stage method toDataURL(callbackFunction) works great , but we are calling it effectively from componentDidMount() , and I don't believe that the drawing is completed at that point. ( Our image is only partly captured, if we add a 2 second wait it will be the correct complete image)

Thanks

Finbar

[lavrton]

It is simple to force redraw if a stage has no images (so you don't have to wait for the network requests).

stage.draw();
const url = stage.toDataURL();

But it gets tricky if you have images, so you have to wait until all components are loaded. That should be implemented in the component.

I was using this simple code for managing loading:

let loadListeners = [];

// how many processes are waiting for loading something
let loadingResourcesNumber = 0;

export function increaseLoadingCounter() {
  loadingResourcesNumber += 1;
}

export function decreaseLoadingCounter() {
  loadingResourcesNumber -= 1;
  if (loadingResourcesNumber === 0) {
    loadListeners.forEach(callback => {
      callback();
    })
    loadListeners = [];
  }
}

export function isLoading() {
  return loadingResourcesNumber > 0;
}

const TIMEOUT = 20 * 1000;
const STEP_TIMEOUT = 5;
const ATTEMPTS = TIMEOUT / STEP_TIMEOUT;

export function whenLoadedCallback(callback, attempts = ATTEMPTS) {
  loadListeners.push(callback);
}

export function whenLoaded() {
  if (!isLoading()) {
    return Promise.resolve();
  }
  return new Promise(resolve => {
    var timeout = setTimeout(() => {
      logger.error(new Error('Waiting for all components loading is failed.'));
      resolve();
    },TIMEOUT)
    
    whenLoadedCallback(() => {
      clearTimeout(timeout);
      resolve();
    });
  });
}

[finbar123]

ok thanks for the quick response I think you are saying that the image loading in my component which is using use-image needs to be modified to provide a call back when all the instances have loaded ?

I can have a look and see how we can do that

Kind Regards

Finbar

[lavrton]

I think you are saying that the image loading in my component which is using use-image needs to be modified to provide a call back when all the instances have loaded ?

Exactly.