getDataURL parameters useBgImage doesn't seems to work about react-canvas-draw HOT 11 OPEN

Yes as I thought the function called was the bad one, if i remember well you just need to remove "this." in the this.drawImage :
index.js line 200 :
drawImage({ctx: context,img: this.props.imgSrc,x: 0,y: 0,w: this.props.canvasWidth, h: this.props.canvasHeight});
I don't know how to do a pull request but I'll try posting one.

from react-canvas-draw.

any updates here?

from react-canvas-draw.

any updates here?

from react-canvas-draw.

Yes as I thought the function called was the bad one, if i remember well you just need to remove "this." in the this.drawImage : index.js line 200 : drawImage({ctx: context,img: this.props.imgSrc,x: 0,y: 0,w: this.props.canvasWidth, h: this.props.canvasHeight}); I don't know how to do a pull request but I'll try posting one.

Can you please explain exactly how / where you did edit this in other to get it to work? I've looked into the node_modules for an index.js but couldn't manage it... thanks

from react-canvas-draw.

any updates here?

from react-canvas-draw.

Still not working. Any updates?

@mitjana Could you please share your modified index.js file with the solution? I could create the PR then... Thanks! 🙂

from react-canvas-draw.

@embiem I am currently investigating what is happening when getting the image data with the background.

Disclaimer: I haven't really worked a lot with canvas elements ✌️

In the index.js on line 178, you save the reference to the canvas.

let canvasToExport = this.canvas.drawing;

In total, the library uses four canvas instances.

I found out that the background image is part of the canvas with the name "grid".

Is this a reason why the background image is not part of the canvas we are trying to save?

I hope that is somewhat clear.

from react-canvas-draw.

Hello,
I just made a pull request with the line modified. Check PR #141

I hope it can help you.

from react-canvas-draw.

@mitjana Thank you so much for creating the pull request ✌️ I've just tested it locally and I am getting the following runtime error:

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'. drawImage.js:63

How did you solve this issue?

@embiem Could you please have a look at the issue? I really like your library and would love to integrate it into our project fully. But this feature would be required for us. Please let me know if you need further details!

from react-canvas-draw.

Hi there,

@skuntze I think you may have a clue concerning the canvas ref at line 178 in index.js. Seems like we get only the drawings but not the bgImage as it is drawn on the canvas grid. I'm no expert but it looks like a good lead, right ?

@embiem I really appreciate your work on this library. I would like to use background image in my project too but as it's still not working...
Let us know if we can help to fix that quickly !
Thanks again

from react-canvas-draw.

Hi there.

I had the same problem so I made this.

https://codesandbox.io/s/canva-with-background-image-uf652c

from react-canvas-draw.