embiem / react-canvas-draw

React Component for drawing in canvas

https://embiem.github.io/react-canvas-draw/

MIT License

892 stars 315 forks source link

imgSrc not rendered! #61

Closed anil32 closed 2 years ago

anil32 commented 4 years ago

at first image , there is no problem but if you try to select another image ant set it with setState, imgSrc not rendered

easyselva commented 4 years ago

after changing src please do this this.saveableCanvas.drawImage();

sjzamora86 commented 4 years ago

Thanks @easyselva it works for me! :D

embiem commented 4 years ago

Actually, reopening to track as an issue. The component should detect the changed image src and update accordingly.

bsteps commented 4 years ago

Also Image is overlapping each other

embiem commented 4 years ago

PR to fix this is in the works at #76

parammittal16 commented 4 years ago

@NishantTadvi A working but not the very best fix is to call this.saveableCanvas.drawImage(); as well as alter canvas width or height a little bit through state, this will force canvas to re-render and will be rendering new image without previous image overlapping. Hope this helps !!

akshatbhargava123 commented 4 years ago

I'm receiving CORS error for all the images I tried, the possible reason is that the library tries to fetch image using XMLHttpRequest or fetch or some other programmatic method.

What is the possible solution for the same?

ShahNafis commented 3 years ago

I am also getting the same CORS error with some images. For example, an image of a dog like this one doesn't work and gives the following error.

Access to image at 'https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2019/12/03202400/Yellow-Labrador-Retriever.jpg' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

embiem commented 2 years ago

76 is now merged which fixes this issue